例如,有一个id叫做mleft的div,当内容超过他原本的高度或者宽度,出现滚动条。
一般默认的滚动条太难看,此时我们要自定义样式
div的基本css:
#mleft{ width:200px; height:500px; float:left; background-color:rgb(0,191,255); overflow:auto;/*当内容超过,出现滚动条*/ }
滚动条的css【以下对应的选择器都要有才行】
#mleft::-webkit-scrollbar{/*滚动条整体*/ width:10px; } #mleft::-webkit-scrollbar-track{/*滚动条轨道*/ background:#999; border-radius:2px; } #mleft::-webkit-scrollbar-thumb{/*滚动条里面的滑块*/ background:white; border-radius:10px; } #mleft::-webkit-scrollbar-thumb:hover{/*滚动条鼠标事件,鼠标放上去出现的事件*/ background:#333; } #mleft::-webkit-scrollbar-corner{/*滚动条边角*/ background:#179a16; }
注意:滚动条对应的所有选择器:
::-webkit-scrollbar /*滚动条整体*/
::-webkit-scrollbar-thumb /*滚动条里面的滑块*/
::-webkit-scrollbar-track /*滚动条的轨道*/
::-webkit-scrollbar-button /*滚动条轨道两端按钮*/
::-webkit-scrollbar-track-piece /*内层轨道,轨道条中间部分(除去)*/
::-webkit-scrollbar-corner /*滚动条边角*/
::-webkit-resizer /*定义右下角拖动块的样式*/
注意:以上内容来源于百度经验,已经过验证【原内容地址:https://jingyan.baidu.com/article/6079ad0e32752d68fe86db29.html】
学习后的思考:
滚动条能否变成进度条呢?显然是可以的,自己滚动滚动条就会发现,通过一定的样式设置,使用css+js完全可以结合,当数据加载/下载的量多,进度条滑块自己就减小,如此,滑块变长,就做到了。
来源:https://www.cnblogs.com/ciscolee/p/12438983.html