CSS实现为.show-scrollbar类元素单独显示全局隐藏的滚动条

之前方案失效的核心原因 #

绝大多数写法不生效都是两个共性问题导致的：

• WebKit内核的滚动条伪元素::-webkit-scrollbar是直接附着在对应可滚动元素上的，用预处理器嵌套写规则时如果不拼接父类选择器，最终生成的选择器是命中类元素的后代滚动条，根本不会作用于类元素自身的滚动条
• 滚动条相关的样式属性没有继承特性，也不存在统一的“显示滚动条”的初始值，直接写initial重置样式既没法覆盖全局的隐藏规则，也不符合不同浏览器下的有效值要求——之前尝试重置初始值不生效，本质是全局隐藏规则的选择器权重更高，就算写初始值也会被全局的none设置覆盖。

分浏览器适配的正确CSS规则 #

WebKit内核（Chrome/Safari/新版Opera） #

全局隐藏规则保持原有写法不变，单独显示的规则必须直接将类选择器和滚动条伪元素拼接为完整选择器，不能靠嵌套默认生成后代选择器：

/* 全局隐藏所有WebKit内核下的滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 带.show-scrollbar类的可滚动元素单独显示滚动条 */
.show-scrollbar::-webkit-scrollbar {
  display: block;
  width: 8px;
  height: 8px;
}
/* 可选：搭配设置滚动条滑块、轨道的基础样式，保证视觉统一 */
.show-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.show-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

预处理器（Sass/Less）写法提醒：必须用&拼接选择器，否则会生成错误的后代选择器：
正确写法：

.show-scrollbar {
  &::-webkit-scrollbar {
    display: block;
  }
}

错误写法（无&）：

.show-scrollbar {
  ::-webkit-scrollbar {
    display: block;
  }
}

错误写法最终编译结果为.show-scrollbar ::-webkit-scrollbar，仅命中类元素内部的子元素滚动条，完全不作用于类元素本身。

旧版IE/Edge 内核适配 #

全局规则保持原有-ms-overflow-style: none的隐藏配置，单独显示的元素直接设置能触发滚动条显示的属性值即可：

/* 全局隐藏旧版IE/Edge下的滚动条 */
* {
  -ms-overflow-style: none;
}

/* 带.show-scrollbar类的元素单独显示滚动条 */
.show-scrollbar {
  -ms-overflow-style: auto;
}

Firefox 适配 #

同理保持全局隐藏规则，单独显示的元素直接设置能触发滚动条显示的属性值即可：

/* 全局隐藏Firefox下的滚动条 */
* {
  scrollbar-width: none;
}

/* 带.show-scrollbar类的元素单独显示滚动条 */
.show-scrollbar {
  scrollbar-width: auto; /* 可替换为thin适配细滚动条的视觉效果 */
}

额外避坑提醒 #

• 注意选择器权重匹配：如果你的全局隐藏规则是写在高权重选择器下（比如:root * { ... }），单独显示的规则也要对应提升权重，比如写为:root .show-scrollbar，避免被全局规则覆盖
• 滚动条样式不具备继承特性：所有规则都需要直接绑定到最终的可滚动元素上，不能靠父元素设置来改变子元素的滚动条显示状态
• 不要随意加!important强制覆盖：只要选择器权重匹配、拼接正确，不需要加!important就能正常生效

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