CSS004. 自定义滚动条样式（webkit）

CSS

/* 滚动条宽度 */
::-webkit-scrollbar {
　　width: 6px;
}

/* 轨道样式 */
::-webkit-scrollbar-track {
　　background-color: transparent;
}

/* 滑块样式 */
::-webkit-scrollbar-thumb {
　　-webkit-border-radius: 12px;
　　border-radius: 12px;
　　background: rgba(0, 0, 0, .2);
}

/* 滑块悬停 */
::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .5);
}

Less

/* 滚动条宽度 */
::-webkit-scrollbar {
　　width: 6px;
}

/* 轨道样式 */
::-webkit-scrollbar-track {
　　background-color: transparent;
}

/* 滑块样式 */
::-webkit-scrollbar-thumb {
　　-webkit-border-radius: 12px;
　　border-radius: 12px;
　　background: rgba(0, 0, 0, .2);
　　&:hover {
　　　　background: rgba(0, 0, 0, .5);
　　}
}

全局滚动条样式如上定义即可，若要对某个盒子局部修改，需要在 ::-webkit-scrollbar 前面加上该盒子的 class / id 或其他选择器：

.myDiv {
    &::-webkit-scrollbar {
        width: 6px;
    }
}

 尤其是Less的语法，xdm常常误以为只要把 ::-webkit-scrollbar 放在 .myDiv 的花括号包裹中就可以生效，实际上不会有任何的效果。

一定要在 ::-webkit-scrollbar 的前面加上  &  

浏览器兼容性

由于是基于webkit内核提供的方法，所以部分其他内核的浏览器无法兼容，如果对兼容性需求较大，可以使用第三方组件库带有的滚动条或者手写一套滚动条。

通过测试的浏览器：Chrome、Safari、Edge、Opera、360、QQ、搜狗、遨游、猎豹、2345

未通过：IE11、Firefox

* 除注明版本的浏览器以外，测试均为发布文章时的最新版本 ( 2021-03-17 )

 

 

- END -