div内容超过实现滚动条以及设置滚动条属性【CSS实现】

例如，有一个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 /*滚动条边角*/

扫描二维码关注公众号，回复： 9650554 查看本文章

::-webkit-resizer /*定义右下角拖动块的样式*/

注意：以上内容来源于百度经验，已经过验证【原内容地址:https://jingyan.baidu.com/article/6079ad0e32752d68fe86db29.html】
学习后的思考：

滚动条能否变成进度条呢？显然是可以的，自己滚动滚动条就会发现，通过一定的样式设置，使用css+js完全可以结合，当数据加载/下载的量多，进度条滑块自己就减小，如此，滑块变长，就做到了。

div内容超过实现滚动条以及设置滚动条属性【CSS实现】

猜你喜欢