重定义CSS

发表于 分类于
本文字数： 560 阅读时长 ≈ 1 分钟

该文讲述了一种自定义滚动栏CSS的方法。

文章来源：https://webkit.org/blog/363/styling-scrollbars/

参考链接：https://css-tricks.com/custom-scrollbars-in-webkit/

对于webkit内核的浏览器支持自定义滚动栏样式，其中包括但不仅限于Chrome，Edge。

正文开始：

自定义滚动栏示例

上图是一个自定义的滚动栏示例，主要用到了以下的参数：

1
2
3
4
5
6
7
::-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-resize{/* 7 */}

我将逐个讲解每个伪元素的含义

图示

序号 元素名 元素含义
1 scrollbar 该元素是整个滚动栏的整体，滚动栏包括滚动条以及控制按钮，可以通过设置width、height、background、border-radius属性对滚动栏样式进行设置
2 scrollbar-button 该元素是滚动栏的控制按钮，即控制上下左右的按钮
3 scrollbar-track 该元素是滚动条整个容器区域
4 scrollbar-track-piece 该元素是滚动条未覆盖的区域
5 scrollbar-thumb 该元素是滚动条主体
6 scrollbar-corner 该元素定义的为当垂直与水平滚动条都存在时的相交区域
7 resize 该元素为类似于textarea这种存在可变区域时的相交区域

对于滚动条而言它同样存在伪类，伪类有以下几种：

1
2
3
4
5
6
7
8
9
10
11
:horizontal – horizontal 伪类应用于每一个水平方向上的滚动条部件。
:vertical – vertical 伪类应用于每一个垂直方向上的滚动条部件。
:decrement – decrement 伪类应用于 button 和 track piece，表示 button 或 track piece 的负向（例如垂直滚动条的向上和水平滚动条的向左）部分。
:increment – increment 伪类应用于 button 和 track piece，表示 button 或 track piece 的正向（例如垂直滚动条的向下和水平滚动条的向右）部分。
:start – start 伪类应用于 button 和 track piece，表示 thumb 之前的部分。
:end – start 伪类应用于 button 和 track piece，表示 thumb 之后的部分。
:double-button – double-button 伪类应用于 button 和 track piece。用于 button 表示滚动条的同一端有一对按钮；用于 track piece 表示是否紧邻一对按钮。
:single-button – double-button 伪类应用于 button 和 track piece。用于 button 表示滚动条的同一端只有一个按钮；用于 track piece 表示是否紧邻单独的按钮。
:no-button – no-button 伪类应用于 track piece，表示 track piece 是否移动到了滚动条的边缘。例如 track 的某一端没有按钮。
:corner-present – corner-present 伪类应用于滚动条的所有部件，表示是否显示滚动条的 corner。
:window-inactive – window-inactive 伪类应用于所有滚动条的部件，表示包含滚动条的窗口当前是否是激活的。（在最新版中这个伪类也可作用于 ::selection。我们打算把它扩展至所有内容并推动它成为一个新的标准伪类。）

使用方法示例如下：

1
2
3
4
5
6
7
8
9
10
11
::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn't in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it's being hovered by the mouse */
}