CSS隐藏滚动条仍可滚动：兼容全浏览器解决方案求助

嘿，这个问题我之前踩过坑！你用的::-webkit-scrollbar { display: none; }确实只对Chrome、Safari这类WebKit/Blink内核的浏览器生效，要搞定所有主流浏览器（包括Firefox、Edge、甚至IE10+），得把几种属性结合起来用，我给你整理了两种靠谱的实现方式：

方案一：CSS原生属性组合（推荐，覆盖99%现代浏览器） #

给需要隐藏滚动条的容器添加一个自定义类（比如.scroll-hide），然后组合使用不同浏览器的私有属性：

.scroll-hide {
  /* 针对 Chrome、Safari、Edge Chromium 等 WebKit/Blink 内核浏览器 */
  ::-webkit-scrollbar {
    display: none;
  }

  /* 针对 IE 10+ 和旧版 Edge（非Chromium内核） */
  -ms-overflow-style: none;

  /* 针对 Firefox */
  scrollbar-width: none;

  /* 核心：确保容器可以正常滚动 */
  overflow-y: auto;
  /* 如果需要横向滚动，加上下面这行 */
  /* overflow-x: auto; */
}

各属性说明： #

• ::-webkit-scrollbar { display: none; }：直接隐藏WebKit内核的滚动条
• -ms-overflow-style: none;：IE和旧Edge的专属属性，隐藏滚动条同时保留滚动能力
• scrollbar-width: none;：Firefox的标准属性，设置滚动条宽度为0，达到隐藏效果

方案二：容器嵌套兜底法（兼容极老浏览器，比如IE9及以下） #

如果你的项目需要兼容特别老的浏览器，上面的CSS属性可能不生效，这时候可以用「外层容器遮罩滚动条，内层容器承载内容」的思路：

<!-- 外层容器：负责隐藏溢出的滚动条 -->
<div class="scroll-outer">
  <!-- 内层容器：负责滚动内容 -->
  <div class="scroll-inner">
    <!-- 这里放你的页面内容 -->
  </div>
</div>

.scroll-outer {
  /* 设置外层容器的固定宽高 */
  width: 300px;
  height: 400px;
  /* 隐藏超出容器的内容（包括滚动条） */
  overflow: hidden;
  position: relative;
}

.scroll-inner {
  /* 内层宽度比外层宽20px（刚好遮住纵向滚动条的宽度） */
  width: calc(100% + 20px);
  /* 内层高度比外层高20px（遮住横向滚动条） */
  height: calc(100% + 20px);
  /* 开启滚动 */
  overflow: auto;
  /* 可选：添加内边距，防止内容被外层容器的边缘遮挡 */
  padding-right: 20px;
  padding-bottom: 20px;
}

注意事项： #

• 优先用方案一，因为代码更简洁，也符合现代浏览器的标准
• 方案二需要注意内层容器的宽高计算，不同浏览器的滚动条宽度可能略有差异，20px是一个通用的安全值
• 不管用哪种方案，都要确保容器的overflow属性设置为auto或scroll，否则无法触发滚动

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