代码:
.scrollbar {
width:700px;
height:300px;
overflow:auto;
margin-bottom:20px;
margin: 0 auto;
}
.scrollbar div {
width:900px;
height:500px;
}
/*滚动条整体样式*/
/*高宽分别对应横竖滚动条的尺寸*/
.scrollbar::-webkit-scrollbar {
width:15px;
height:15px;
}
/*滚动条里面小方块*/
/*水平滚动条*/
.scrollbar::-webkit-scrollbar-thumb:horizontal {
border-radius:10px;
background-color:skyblue;
background-image:url('tiaowen-x.gif');
background-repeat:repeat-x;
}
/*垂直滚动条*/
.scrollbar::-webkit-scrollbar-thumb:vertical {
border-radius:10px;
background-color:skyblue;
background-image:url('tiaowen-y.gif');
background-repeat:repeat-y;
}
/*滚动条里面轨道*/
.scrollbar::-webkit-scrollbar-track {
box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
background:#ededed;
border-radius:10px;
}
/*边角,两个滚动条交汇处小方块*/
.scrollbar::-webkit-scrollbar-corner {
background:none;
}
滚动条素材:


