如何重置 webkit-scrollbar 样式

Question

我的设计依赖项之一是滚动条的样式，我希望它重置为浏览器默认值。

我已应用以下样式以尝试删除样式：

1. ::-webkit-scrollbar { all: unset;}

2. ::-webkit-scrollbar { all: initial;}

3. ::-webkit-scrollbar { width: unset;}

4. ::-webkit-scrollbar { width: initial;}

应用于滚动条的所有样式（颜色、指针等）都已重置，宽度除外，宽度始终可见，但在 Mac OS X 上应自动隐藏并在 Windows 中可见。

我能够完全重置所有样式的唯一方法是手动将它们从我的依赖项中删除。我更愿意以标准方式替换样式，使用级联覆盖不需要的样式。

我应该应用什么样式才能将

-webkit-scrollbar

样式完全恢复为浏览器默认设置？

如何重置

-webkit-scrollbar

样式的问题已经被问到（这里）但是回复中推荐的解决方案并没有解决我的问题。

Answer 1

您可以尝试使用以下 CSS 规则来接近默认样式，使用

initial

：

/* Reset scrollbar styles */
::-webkit-scrollbar {
  background-color: initial;
  width: initial;
  height: initial;
}

/* Reset scrollbar thumb styles */
::-webkit-scrollbar-thumb {
  background-color: initial;
  border: initial;
  border-radius: initial;
}

/* Reset scrollbar track styles */
::-webkit-scrollbar-track {
  background-color: initial;
  border: initial;
  border-radius: initial;
}

/* Reset scrollbar track-piece styles */
::-webkit-scrollbar-track-piece {
  background-color: initial;
  border: initial;
  border-radius: initial;
}

/* Reset scrollbar corner styles */
::-webkit-scrollbar-corner {
  background-color: initial;
}

这组样式应该可以帮助您接近浏览器的默认滚动条外观。但是，请注意，它不能保证与默认外观完美匹配，因为浏览器供应商可能会应用无法通过 CSS 控制的其他样式或行为。

CSS速记属性呢

all

？

使用 CSS 速记属性

all

在许多情况下可以是重置样式的不错选择，但当涉及到滚动条样式时，它可能并不总是按预期工作。

all

属性对于重置大量属性很有用，但它可能无法涵盖滚动条样式的所有方面，并且可能无法将样式完全重置为浏览器默认值。

在 -webkit-scrollbar 的情况下，

all

属性可能不会像您预期的那样工作，因为滚动条样式特定于基于 WebKit 的浏览器，并且可能不包含在

all

属性中。此外，

all

属性可能无法重置一些控制滚动条外观的非标准伪元素和属性。

为确保您将滚动条样式重置为尽可能接近其浏览器默认设置，建议使用上面提供的单独重置规则。虽然它可能更冗长，但它可以让您更好地控制要重置的滚动条样式的特定方面。