滚动条-伪元素设置

::-webkit-scrollbar 滚动条整体，相当于包在最外面的父盒子
 
::-webkit-scrollbar-thumb  滚动条里面的小方块（可以刺溜刺溜移动的那个）
 
::-webkit-scrollbar-track  滚动条的轨道（你就理解成父盒子的背景）
 
::-webkit-scrollbar-button 滚动条的轨道的两端按钮
 
::-webkit-scrollbar-track-piece 内层轨道（就是track减去thumb剩余部分）
 
::-webkit-scrollbar-corner 边角，垂直和水平两个滚动条的交汇处
 
::-webkit-resizer 放在两个滚动条的交汇处，用于拖动调整元素大小的控件

/* 滚动条滑块悬停样式 */
.scroll-container::-webkit-scrollbar-thumb:hover

  /* 隐藏轨道 */
.body::-webkit-scrollbar-track {
        display: none;
    }

.scroll-container {
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* 自定义滚动条样式 */
.scroll-container::-webkit-scrollbar {
    width: 5px; /* 滚动条宽度 */
}

/* 滚动条轨道 */
.scroll-container::-webkit-scrollbar-track {
    background: transparent; /* 背景色 */
}

/* 滚动条滑块 */
.scroll-container::-webkit-scrollbar-thumb {
    background: #888; /* 滑块颜色 */
}

/* 滚动条滑块悬停样式 */
.scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555; /* 悬停时的颜色 */
}

/* 隐藏滚动条对应的空间 */
.scroll-container {
    padding-right: 17px; /* 如果你的滚动条位于右侧，请使用 padding-right */
    margin-right: -17px; /* 如果你的滚动条位于右侧，请使用 margin-right */
}

 

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 10px;    
    background-color: #fff;  
}  

/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: lightgray;  
}  

/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: blue;  
}  
/*定义最上方和最下方的按钮*/
::-webkit-scrollbar-button{
     background-color: #000;
     border:1px solid yellow;
}

$(".innerBox").scrollTop(100 * (clickData[0].index / 19));

• scrollLeft()

• scrollTop()

overflow:scroll /* x y 方向都会*/

或者

overflow-x:scroll /*只是x方向*/

或者

overflow-y:scroll  /*只是y方向*/

 

示例：

 &::-webkit-scrollbar {
            width: 2px !important;
        }

        &::-webkit-scrollbar-thumb {
            width: 2px !important;
            background: rgba(255, 255, 255, 0.52);
            border-radius: 1.2px;
        }

        &::-webkit-scrollbar-track {
            display: none;
            /* 隐藏轨道 */
        }