如何重置-webkit-scrollbar样式？自定义后无法恢复原生样式

自定义::-webkit-scrollbar系列样式后，尝试用unset重置属性无法恢复浏览器原生滚动条样式，在Chrome 131/133、Safari 18.1.1/18.2（macOS环境）中均存在此问题：

• 启用自定义样式后滚动条显示正常
• 重置时设置height: unset、width: unset等属性，滚动条显示异常；若将::-webkit-scrollbar-thumb的background设为unset，滚动条会直接消失

最优解决方案：通过类名切换控制样式 #

最可靠的方式是避免直接重置属性，而是通过添加/移除类名来启用或关闭自定义滚动条样式。当移除自定义类时，浏览器会自动恢复原生滚动条渲染逻辑。

示例代码 #

/* 仅当目标容器带有custom-scrollbar类时，应用自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    background-color: aqua;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgb(87, 20, 112);
    border-radius: 16px;
}

// 启用自定义滚动条样式
document.querySelector('.scroll-area').classList.add('custom-scrollbar');

// 禁用自定义样式，恢复原生滚动条
document.querySelector('.scroll-area').classList.remove('custom-scrollbar');

备选方案：强制重置所有滚动条属性（兼容性有限） #

如果无法通过类名切换，可尝试重置所有::-webkit-scrollbar相关子元素的属性，使用initial而非unset（部分浏览器对initial的原生样式恢复支持更友好），同时覆盖所有可能的滚动条子元素：

/* 重置所有webkit滚动条组件的样式 */
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track-piece {
    all: initial;
}

/* 针对Safari额外设置滚动条尺寸为自动，匹配原生逻辑 */
::-webkit-scrollbar {
    width: auto;
    height: auto;
}

注意：这种方式在部分浏览器中仍可能出现显示偏差，因为initial不一定完全匹配浏览器内置的原生滚动条样式，类名切换的方式稳定性更高。

问题原因 #

unset仅会将属性重置为继承值（若属性可继承）或CSS初始值，但webkit滚动条的原生样式并非基于标准CSS初始值，而是浏览器内置的私有渲染规则。一旦自定义了任何::-webkit-scrollbar相关样式，浏览器会切换到纯CSS渲染模式，放弃原生样式逻辑，此时仅重置部分属性无法触发原生样式的恢复。

内容的提问来源于stack exchange，提问作者JBeen