::-webkit-scrollbar
非标准: 该特性尚未标准化。我们不建议在生产环境中使用非标准特性，因为它们在浏览器中的支持有限，且可能发生变化或被移除。不过，在没有标准选项的特定情况下，它们可以作为合适的替代方案。
::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条样式。
备注：
如果没有设置 overflow:scroll;，元素的滚动条将不会显示。
备注： ::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其他基于 WebKit 的浏览器）上可用。滚动条样式的标准方法可用于 scrollbar-color 和 scrollbar-width。
CSS 滚动条选择器
你可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式：
::-webkit-scrollbar——整个滚动条。::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。::-webkit-scrollbar-thumb——滚动条上的滚动滑块。::-webkit-scrollbar-track——滚动条轨道。::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。
示例
CSS
css
.visible-scrollbar,
.invisible-scrollbar,
.mostly-customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
display: none;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
}
HTML
html
结果
规范
不属于任何标准。
浏览器兼容性
css.selectors.-webkit-scrollbar
css.selectors.-webkit-scrollbar-button
css.selectors.-webkit-scrollbar-thumb
css.selectors.-webkit-scrollbar-track
css.selectors.-webkit-scrollbar-track-piece
css.selectors.-webkit-scrollbar-corner
css.selectors.-webkit-resizer
参见
- WebKit 论坛设置滚动条样式
scrollbar-widthscrollbar-color