css樣式如下:
#div1{ width:200px; height:400px; background:red; overflow:auto;
} #div1::-webkit-scrollbar{ width:5px; height:5px; } #div1::-webkit-scrollbar-track{ background:hotpink; //軌道的樣式 } #div1::-webkit-scrollbar-thumb{ background:deeppink; //滑動條的樣式 } #div1::-webkit-scrollbar-thumb:hover{ background:palevioletred; //鼠標移到滑動條上滑動條的樣式 } #div1::-webkit-scrollbar-button{ background:orange; //微調按鈕的樣式,如下圖中的橙色部分,位于軌道的兩端 border-radius:15px; } #div1::-webkit-scrollbar-corner{ background:green; //邊角,即兩個滾動條的交匯處,如下圖中綠色部分 } #div2{ width:300px; height:500px; background:pink; }
html如下:
<div id=’div1’> <div id=’div2’> 1<br/> 2<br/> 3<br/> 4<br/> 5<br/> 6<br/> 7<br/> </div> </div>
【 微信掃一掃 】