CSS3自訂滾動樣式

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=&#39;div1&#39;>
　　<div id=&#39;div2&#39;>
　　　　1<br/>
　　　　2<br/>
　　　　3<br/>
　　　　4<br/>
　　　　5<br/>
　　　　6<br/>
　　　　7<br/>
　　</div>
</div>

效果如下：

更多CSS3自訂滾動中文樣式相關文章請關注PHP網！