CSS 自定义滚动条

滚动条的宽度

首先，我们需要定义滚动条的大小。这可以是垂直滚动条的宽度，也可以是水平滚动条的高度。

.section::-webkit-scrollbar {
    width: 10px;
}

滚动条 track

这代表了滚动条的基础。我们可以通过添加background、shadows、border-radius和border来对它进行造型。

.section::-webkit-scrollbar-track {
    background-color: darkgrey;
}

滚动条 thumb

准备好了滚动条的基础后，我们就需要对滚动条的thumb进行样式设计。这很重要，因为用户可能会拖动这个thumb与滚动条进行交互。

.section::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

至此，我们已经介绍了CSS中定制滚动条的老方法。让我们探索一下新的语法。

新语法
Scrollbar Width

正如它所说的，这定义了滚动条的宽度，有两个值auto 和 thin。不好的地方就是，我们不能像webkit的语法那样定义一个具体的数字。

.section {
  scrollbar-width: thin;
}

Scrollbar Color

有了这个属性，我们可以为滚动条 track和thumb定义成对值的颜色。

.section {
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}

尽管这个新语法很简单，但它是有限制的。我们只能添加颜色。我们不能添加shadows``、gradients、rounded`，或任何类似的东西，我们被允许定制的只是颜色。

指定自定义滚动条的范围
要知道的一个重要问题是，在哪里定制滚动条。你希望样式是通用的，对网站上的所有滚动条都有效吗？还是你只想让它用于特定的部分？

使用旧的语法，我们可以编写选择器，而不必将它们附加到元素上，它们将应用于所有可滚动的元素。

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: darkgrey;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

如果你想只适用于一个特定的部分，你需要在选择器之前附加元素。

.section::-webkit-scrollbar {
    width: 10px;
}

.section::-webkit-scrollbar-track {
    background-color: darkgrey;
}

.section::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

对于新的语法，它几乎是一样的。我注意到的是，如果你想要一个通用的样式，它应该被应用于元素，而不是。

html {
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}

我尝试为添加上面的内容，但它没有像预期的那样工作。

现在我们知道了新旧语法的工作原理，接着，我们开始定制一些滚动条设计。