Firefox 115.0.3(64位)下无法用-webkit-scrollbar CSS规则隐藏滚动条

针对你遇到的Firefox下无法用CSS隐藏滚动条的问题，试试下面的排查和解决方法：

1. 确认目标元素与样式匹配 #

如果滚动条不是属于<body>，而是某个自定义容器（比如带滚动的<div>），必须给对应容器设置scrollbar-width: none，而不是只给body加样式。举个容器的例子：

/* 带滚动的容器 */
.scroll-box {
  overflow-y: auto; /* 必须设置滚动属性，否则scrollbar-width不生效 */
  scrollbar-width: none; /* Firefox专属规则 */
}

/* Chrome/Edge/Safari 规则 */
.scroll-box::-webkit-scrollbar {
  display: none;
}

2. 排查样式优先级冲突 #

如果你的样式被其他CSS规则覆盖，可临时添加!important测试是否生效（后续建议优化选择器优先级，尽量少用!important）：

body {
  scrollbar-width: none !important;
  overflow-y: auto;
}

3. 检查Firefox内置设置 #

Firefox有个"始终显示滚动条"的全局设置，会覆盖CSS规则：

• 打开Firefox设置 → 常规 → 滚动条
• 取消勾选"始终显示滚动条"选项

4. 完整跨浏览器兼容代码（针对body） #

/* Chrome、Edge、Safari 隐藏滚动条 */
body::-webkit-scrollbar {
  display: none;
}

/* Firefox 隐藏滚动条 */
body {
  scrollbar-width: none;
  overflow-y: auto; /* 保持页面可滚动，同时隐藏滚动条 */
}

如果以上方法都没用，检查是否有浏览器扩展（比如样式修改类插件）干扰了页面样式，可尝试在隐私模式下测试。

内容的提问来源于stack exchange，提问作者Mohsin Ullah Shah