CSS3修改滚动条样式
Posted JayEr
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3修改滚动条样式相关的知识，希望对你有一定的参考价值。
前言--
webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。
演示--
html：
<div class="scroll">
<div class="content"></div>
</div>
CSS3：
.scroll{
width:200px;
height:300px;
overflow-y:scroll;
background: #eee;
}
.content{
height:500px;
}
/*滚动条样式*/
.scroll::-webkit-scrollbar{ /* 滚动条整体部分 */
width: 4px;
}
.pullOption::-webkit-scrollbar-button{/* 滚动条的轨道的两端按钮 */
width: 4px;
height:4px;
}
.scroll::-webkit-scrollbar-track{ /* 滚动条的轨道 */
background: transparent;
border: thin solid transparent;
box-shadow: 0px 0px 3px transparent inset;
border-radius:10px;
}
.scroll::-webkit-scrollbar-thumb{/*滚动条里面的小方块 */
background:#3e4561;
border: thin solid transparent;
border-radius:10px;
height:5px;
}
.scroll::-webkit-scrollbar-thumb:hover{
background:#7d7d7d;
}
运行效果：
滚动条组成部分--
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
以上是关于CSS3修改滚动条样式的主要内容，如果未能解决你的问题，请参考以下文章