div内容超过实现滚动条以及设置滚动条属性【CSS实现】
例如，有⼀个id叫做mleft的div，当内容超过他原本的⾼度或者宽度，出现滚动条。
⼀般默认的滚动条太难看，此时我们要⾃定义样式
div的基本css:
#mleft{
width:200px;
height:500px;
float:left;
background-color:rgb(0,191,255);html横向滚动条样式
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 /*定义右下⾓拖动块的样式*/
滚动条能否变成进度条呢？显然是可以的，⾃⼰滚动滚动条就会发现，通过⼀定的样式设置，使⽤css+js完全可以结合，当数据加载/下载的量多，进度条滑块⾃⼰就减⼩，如此，滑块变长，就做到了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。