常用属性如下
::-webkit-scrollbar:指滚动条整体部分,它的属性有width,height,background等
::-webkit-scrollbar-button : 指滚动条两边的按钮。当不需要时可以用display:none将其隐藏
::-webkit-scrollbar-track :指外层轨道部分,当不需要时可以用display:none将其隐藏,也可以添加你想要的颜色
::-webkit-scrollbar-track-piece :指内层轨道部分,即滚动条中间的部分
::-webkit-scrollbar-thumb : 指滚动条里面可以拖动的部分,也就是滑块
::-webkit-scrollbar-corner :指边角部分
::-webkit-resizer :他用来定义右下角滑块的样式
常用的是滚动条整体部分(-webkit-scrollbar),滑块(-webkit-scrollbar-thumb)以及外轨道( -webkit-scrollbar-track)三部分。
实例代码
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(69, 26, 187, 0.4);
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
/* 滚动条滑块 window-inactive非激活窗口 该特性是非标准的,请尽量不要在生产环境中使用它!*/
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(69, 26, 187, 0.1);
}
修改单个dom元素可以再伪元素的加一层选择器来表示一类或唯一。
#domid ::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 0, 0, 0.4);
}