大家在网上也许看到过各种各样的滚动条,那么在我们的html中呢,滚动条也是可以进行编辑的, 哈哈,是不是很神奇 那么如果我们要自定义滚动条的话,其实也是可以的, 其实就是用到了webkit的一个叫做s
大家在网上也许看到过各种各样的滚动条,那么在我们的html中呢,滚动条也是可以进行编辑的,
哈哈,是不是很神奇
那么如果我们要自定义滚动条的话,其实也是可以的,
其实就是用到了webkit的一个叫做scrollbar的伪类
这个伪类中有几个点注意一下就可以,
- thumb:滚动条里面的小方块,也就是我们用来拖动的滑块
- track:滚动条的轨道,也就是滑块的拖行范围
- buttons:滚动条的轨道两端的按钮,可以点击它来控制滑块的位置
- corner:两个滚动条交汇的位置.这是指x轴和y轴都能够滑动的前提下
- resizer:两个滚动条的交汇处上用于通过拖动调整元素大小的小控件,这个就是调整元素的控件
ok,下面直接来代码
.demo::-webkit-scrollbar { width: 13px;/*对垂直流动条有效*/ height: 13px;/*对水平流动条有效*/ }
.demo::-webkit-scrollbar-track{ background-color: #fff;//滚动条轨道的颜色 }
.demo::-webkit-scrollbar-thumb{ background-color: rgba(0, 0, 0, .1);//小滑块的颜色 border-radius: 4px;//小滑块的圆角 }
.demo::-webkit-scrollbar-button { background-color: #888;//滚动条按钮颜色 display: none;//不给予呈现 }
