首页 > 技术文章 > 滚动条的样式

maxiag 2020-10-23 18:14 原文

/*定义滚动条样式(高宽及背景)*/ 
        ::-webkit-scrollbar { 
            width: 6px;   /* 滚动条宽度, width:对应竖滚动条的宽度  height:对应横滚动条的高度*/
            background: #007acc;
        } 
        /*定义滚动条轨道(凹槽)样式*/ 
        ::-webkit-scrollbar-track { 
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
            border-radius: 3px; 
        } 
        /*定义滑块 样式*/ 
        ::-webkit-scrollbar-thumb { 
            border-radius: 3px; 
            height: 100px;    /* 滚动条滑块长度 */
            background-color: #ccc;

最后,总结 一个滚动条的组成部分(通常设置前三个即可):

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里面的小方块(即滚动条滑块),能向上向下移动(或横向滚动条可往左往右移动)
  • ::-webkit-scrollbar-track  滚动条的轨道(对应上图滚动条凹槽,里面装有Thumb,即滚动条滑块)
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置
  • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

推荐阅读