CSS3自定义滚动样式

css样式如下：

#p1{
　　width:200px;
　　height:400px;
　　background:red;
　　overflow:auto;
}
#p1::-webkit-scrollbar{
　　width:5px;
　　height:5px;
}
#p1::-webkit-scrollbar-track{
　　background:hotpink; //轨道的样式
}
#p1::-webkit-scrollbar-thumb{
　　background:deeppink;  //滑动条的样式
}
#p1::-webkit-scrollbar-thumb:hover{
　　background:palevioletred; //鼠标移到滑动条上滑动条的样式
}
#p1::-webkit-scrollbar-button{
　　background:orange;　　//微调按钮的样式，如下图中的橙色部分,位于轨道的两端
　　border-radius:15px;
}
#p1::-webkit-scrollbar-corner{
　　background:green; //边角，即两个滚动条的交汇处,如下图中绿色部分
}  
#p2{
　　width:300px;
　　height:500px;
　　background:pink;
}

html如下：

<p id='p1'>
　　<p id='p2'>
　　　　1<br/>
　　　　2<br/>
　　　　3<br/>
　　　　4<br/>
　　　　5<br/>
　　　　6<br/>
　　　　7<br/>
　　</p>
</p>

效果如下：

更多CSS3自定义滚动样式相关文章请关注PHP中文网！