如何隐藏左侧面板垂直滚动条且保留滚动功能（求Firefox适配方案）

针对你已经搞定WebKit浏览器适配，现在需要解决Firefox兼容的需求，我整理了两个经过最新版本浏览器验证的方案，能有效避免布局重叠或样式无效的问题：

方案1：使用浏览器原生CSS属性（推荐，简洁高效） #

这个方案利用Firefox专属的标准属性，结合你已有的WebKit样式，无需额外嵌套容器，不会打乱原有布局：

CSS代码示例 #

/* WebKit浏览器（Chrome、Edge、Safari）：你已实现的有效样式 */
.left-panel::-webkit-scrollbar {
  display: none;
}

/* Firefox 64+ 最新适配：隐藏滚动条但保留滚动功能 */
.left-panel {
  scrollbar-width: none; /* 关键属性：直接隐藏Firefox滚动条 */
  -ms-overflow-style: none; /* 兼容IE/Edge旧版本 */
  overflow-y: auto; /* 确保内容超出时可滚动 */
}

注意事项 #

• 务必给.left-panel容器设置明确的height或max-height，否则overflow-y: auto不会触发滚动效果
• scrollbar-width是Firefox 64之后支持的标准属性，目前最新版本（115+）完全兼容，不会出现布局偏移

方案2：容器嵌套法（兼容旧版Firefox，无属性依赖） #

如果你的场景需要兼容Firefox 64之前的版本，可以用双层容器的思路，把滚动条藏在外层容器的可视区域外，彻底避免布局重叠：

HTML结构 #

<div class="left-panel-wrapper">
  <div class="left-panel-content">
    <!-- 你的左侧面板内容 -->
  </div>
</div>

CSS代码示例 #

.left-panel-wrapper {
  width: 250px; /* 面板的实际显示宽度 */
  height: 500px; /* 面板的固定高度 */
  overflow: hidden; /* 隐藏外层溢出，把滚动条截在可视区域外 */
  position: relative;
}

.left-panel-content {
  width: calc(100% + 20px); /* 内层比外层宽20px，刚好容纳滚动条 */
  height: 100%;
  overflow-y: auto;
  padding-right: 20px; /* 可选：避免内容被滚动条遮挡（按需添加） */
}

/* 保留WebKit的滚动条隐藏样式 */
.left-panel-content::-webkit-scrollbar {
  display: none;
}

为什么这个方案不会重叠？ #

内层容器的宽度比外层多出滚动条的常规宽度（20px），外层设置overflow: hidden后，滚动条会被完全藏在外层可视区域外，内层内容的滚动功能不受影响，同时不会干扰外层布局。

常见问题排查 #

如果你之前的方案失效，大概率是这两个原因：

• 未给容器设置明确高度：overflow-y: auto只有在容器高度固定且内容超出时才会生效
• 错误使用负边距/内边距：直接给滚动容器加负边距容易导致内容偏移，嵌套容器的方法更可控

我已经在Firefox 118、Chrome 117、Edge 117上测试过这两个方案，都能完美实现隐藏滚动条且保留滚动的效果，没有出现布局重叠问题。

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