webkit内核浏览器自定义滚动条样式
Posted 小生不才
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webkit内核浏览器自定义滚动条样式相关的知识，希望对你有一定的参考价值。
::-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>
以上是关于webkit内核浏览器自定义滚动条样式的主要内容，如果未能解决你的问题，请参考以下文章