CSS ::-webkit-scrollbar 伪元素
CSS ::-webkit-scrollbar 伪元素用于设置元素滚动条的样式。它是一个非标准 CSS 属性,仅受基于 WebKit 的浏览器(如 Chrome、Safari 和 Edge)支持。
以下 ::-webkit-scrollbar 伪元素可用于设置滚动条的样式:
- ::-webkit-scrollbar-track − 为滚动条的轨道设置样式 (border, background-color.)
- ::-webkit-scrollbar-thumb − 设置滚动条的拇指(可拖动滚动手柄)的样式。
- ::-webkit-scrollbar-button − 为滚动条的按钮(向上和向下的箭头,一次滚动一行)设置样式。
- ::-webkit-scrollbar-corner − 设置滚动条水平和垂直滚动条相交处的角的样式。
- ::-webkit-resizer − 出现在某些元素底角的可拖动大小调整手柄。
- ::-webkit-scrollbar:horizontal{} − 设置元素的水平滚动条的样式。
- ::-webkit-scrollbar:vertical{} − 设置元素的垂直滚动条的样式。
- ::-webkit-scrollbar-track-piece − 为手柄未覆盖的轨道部分(进度条)设置样式。
下图演示了滚动 webkit 结构以供参考:

以下示例演示了如何使用 -webkit-scrollbar CSS 伪元素来更改 WebKit 浏览器(如 Safari 和 Chrome)中滚动条的外观 -
下面的示例演示如何使用 ::-webkit-scrollbar-button 伪元素来设置元素的滚动条按钮的样式。滚动条按钮是滚动条顶部和底部的两个箭头。
你可以使用 ::-webkit-scrollbar 伪元素来设置垂直滚动条的任何属性的样式,例如其颜色、宽度、边框和 border-radius。
下面是一个示例 -
你可以使用 ::-webkit-scrollbar-track-piece 伪元素来设置元素垂直滚动条的轨道段的样式。
下面是一个示例 -
下面是一个示例,说明如何使用 -webkit-scrollbar CSS 属性(如 box-shadow 和 background-color 以及 border)在基于 WebKit 的浏览器中设置滚动条的样式 -