::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }以上CSS代码所管辖的区域对就关系：以上正文中的数字与下图中数字绝对应。
上图正如如下所言：
::-webkit-scrollbar滚动条整体局部，其中的属性有width,height,background,border（就和一个块级元素一样）等。::-webkit-scrollbar-button滚动条两端的按钮。能够用display:none让其不显示，也能够增加背景图片，色彩扭转显示成果。::-webkit-scrollbar-track外层轨道。能够用display:none让其不显示，也能够增加背景图片，色彩扭转显示成果。::-webkit-scrollbar-track-piece内层轨道，滚动条两头局部（除去）。::-webkit-scrollbar-thumb滚动条外面能够拖动的那局部::-webkit-scrollbar-corner边角::-webkit-resizer定义右下角拖动块的款式
留神：对以上各个局部定义width,height时。有如下性能：若是程度滚动条，则width属性不起作用，height属性用来管制滚动条相应局部竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来管制相应局部的宽度。对::-webkit-scrollbar-button 相同。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#test::-webkit-scrollbar {
width: 13px;
height: 13px;
background-color: gray;
}
#test::-webkit-scrollbar-button {
width: 13px;
height: 13px;
background-color: gray;
}
#test::-webkit-scrollbar-track {
background-color: gray;
}
#test::-webkit-scrollbar-track-piece {
background-color: #dedede;
border-radius: 5px;
}
#test::-webkit-scrollbar-thumb {
background-color: #23211b;
border-radius: 5px;
}
#test::-webkit-scrollbar-corner {
background-color: green;
}
#test::-webkit-resizer {
background-color: green;
}
div.scroll{
margin: 20px auto;
height: 100px;
width: 100px;
overflow: auto;
background-color: red;
}
div.scroll div{
width: 150px;
}
</style>
</head>
<body>
<div id="test" class="scroll">
<div>发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感
</div>
</div>
<div class="scroll">
<div>发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感发的广东省大地飞歌收到合肥读后感
</div>
</div>
</body>
</html>
发表回复