2023年6月20日发(作者：)

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 /*滚动条边⾓*/::-webkit-resizer /*定义右下⾓拖动块的样式*/滚动条能否变成进度条呢？显然是可以的，⾃⼰滚动滚动条就会发现，通过⼀定的样式设置，使⽤css+js完全可以结合，当数据加载/下载的量多，进度条滑块⾃⼰就减⼩，如此，滑块变长，就做到了。

2023年6月20日发(作者：)

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 /*滚动条边⾓*/::-webkit-resizer /*定义右下⾓拖动块的样式*/滚动条能否变成进度条呢？显然是可以的，⾃⼰滚动滚动条就会发现，通过⼀定的样式设置，使⽤css+js完全可以结合，当数据加载/下载的量多，进度条滑块⾃⼰就减⼩，如此，滑块变长，就做到了。