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

心不动则不痛 提交于 2020-03-07 22:56:15

例如,有一个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完全可以结合,当数据加载/下载的量多,进度条滑块自己就减小,如此,滑块变长,就做到了。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!