当一段文本过长,使用overflow:auto属性后,这段文本所在区域将会出现滚动条。有时候,我们需要自定义浏览器的滚动条样式,可以使用css3的scrollbar-thumb属性来实现。
首先看一下这个属性的兼容性。
可见这个属性在pc端支持的并不是特别好,仅支持webkit浏览器,属性需要带有-webkit-前缀。
所以,在pc端请在Chrome或者Safari浏览器中查看效果。
再来看一下滚动条选择器的各个属性的用处。
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
上述各个属性的说明摘录自MDN(https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar)
根据以上介绍,可以写一个自定义的滚动条效果。
::-webkit-scrollbar {
width: 16px;
height: 16px;
border: 2px solid #f2f2f2;
background-color: #F2F2F2;
}
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-track {
background-color: #F2F2F2;
}
::-webkit-scrollbar-track-piece {
background-color: #f2f2f2;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
box-shadow: inset 0 0 1px 0 #f2f2f2;
border: 3px solid #f2f2f2;
background-color: #D9D9D9;
}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
background-color: #c0c0c0;
}
代码运行效果如下:
还有一些伪类也可以使用于滚动条。
:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
no-button伪类表示轨道结束的位置没有按钮。
:corner-present
:window-inactive
::-webkit-scrollbar-track-piece:start {
}
::-webkit-scrollbar-thumb:window-inactive {
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
}
另外,:enabled,:disabled,:hover,:active伪类也可以用于滚动条。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)