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