重置滚动样式（-webkit-scroll）

Question

我遇到了未设置 -webkit-scrollbar 的 css 样式的问题。似乎浏览器一旦应用就无法取消设置。

我创建了一个示例来显示问题：https://codesandbox.io/p/sandbox/lyn2m8

初始原生卷轴（我使用macos）：

通过单击按钮“启用滚动自定义”应用样式：

::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background-color: aqua;
}
::-webkit-scrollbar-thumb {
    background: rgb(87, 20, 112);
    border-radius: 16px;
}

但是当我尝试重置时，通过单击按钮“禁用滚动自定义”——滚动条看起来很奇怪。

款式：

::-webkit-scrollbar {
    height: unset;
    width: unset;
    background-color: unset;
}
::-webkit-scrollbar-thumb {
    background: black;
    border-radius: unset;
}

当我重置拇指背景时，滚动完全消失：

::-webkit-scrollbar-thumb {
    background: unset;
}

我在 Chrome 131、Chrome 133、Safari 18.1.1、Safari 18.2 上检查过。

如何重置卷轴样式？

Answer 1

与这篇文章相关CSS3 - 如何“恢复”::-webkit-scrollbar 属性到默认滚动条。如果您将 -webkit-scrollbar-thumb 设置为 all:unset 或为所有属性设置 auto 值，它应该重置整个滚动条样式但是它似乎在最新版本的 Chrome 中不起作用