CSS3滚动条效果代码
分类：实例代码
CSS3滚动条效果代码属于前端实例代码，有关更多实例代码大家可以查看。
浏览器自带的滚动条通常不太美观，也难于美化。
下面分享一个使用css3实现的滚动条效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
body{
padding:0;
margin:0;
}
.box{
width:600px;
height: auto;
margin:0 auto;
}
.scroll{
overflow:auto;
width: 470px;
height: 210px;
padding-right: 25px;
margin-top: 18px;
}
.scroll p{
font-family: "微软雅黑";
font-size: 14px;
color: #9F9F9F;
line-height: 25px;
margin-top: 20px;
}
#scroll-1 {
overflow:auto;
}
#scroll-1::-webkit-scrollbar {
width:10px;
height:10px;
}
#scroll-1::-webkit-scrollbar-button {
background-color:#fff;
}
#scroll-1::-webkit-scrollbar-track {
background:#dfdfdf;
border-radius:5px;
}
#scroll-1::-webkit-scrollbar-thumb{
background:#F2C826;
border-radius:5px;
}
#scroll-1::-webkit-scrollbar-corner {
background:#82AFFF;
}
#scroll-1::-webkit-scrollbar-resizer {
background:#dfdfdf;
}
</style>
</head>
<body>
<div class="box">
<div class="scroll" id="scroll-1">
<p>只有努力奋斗才会有美好的未来</p>
<p>本站url是<a href="http://www.pipipi.net" target="_blank">www.pipipi.net</a></p>
<p>没有任何人可以随随便便的成功</p>
<p>每一天都是新的，要好好的把握，否则太让人可惜</p>
<p>分享的精神和互助的胸怀是进步的最大原动力</p>
<p>欢迎给本站提供良好的建议和意见</p>
<p>本站拥有数个前端板块，提供了基础的相关知识</p>
</div>
</div>
</body>
</html>
CSS3滚动条效果代码，这样的场景在实际项目中还是用的比较多的，关于CSS3滚动条效果代码就介绍到这了。