隐藏滚动条，但仍然可以在 Firefox 上滚动答案

【问题标题】：Hide scrollbar, but still be able to scroll on Firefox隐藏滚动条，但仍然可以在 Firefox 上滚动
【发布时间】：2025-12-17 17:15:01
【问题描述】：

我在隐藏页面上的滚动条时遇到问题，但我仍然希望能够滚动。

我知道我可以使用

::-webkit-scrollbar {
  display:none;
}

，但它显然不适用于 Firefox 或其他非 webkit 浏览器。

我已经阅读了很多线程来解释我该如何实现这一点，但我就是无法让它发挥作用。

有人可以帮我解决这个问题吗？

网址：http://test.6f.sk/

【问题讨论】：

半相关，IE 和 Edge 使用 -ms-overflow-style: none; 执行此操作。所以真的只有FF（AFAIK）没有解决。

标签： javascript jquery html css firefox

【解决方案1】：

html {
    overflow: -moz-scrollbars-none;
}

或您要禁用滚动条的任何其他元素

【讨论】：

就像溢出一样工作：隐藏；它隐藏了滚动条，但滚动功能不起作用
看来火狐没有等价物。一个技巧是使用负边距，但滚动条的宽度会有所不同。

【解决方案2】：

我知道的最佳答案是将滚动条放在视线之外：

.crop {
  width: 300px;
  overflow-x: hidden;
}

.scroller {
  width: 300px;
  height: 200px;
  overflow-y: scroll;
  
  /* Must be ≥ scrollbar width. Scrollbar width varies by
   * browser, OS, and config, so don't be precise, choose
   * something wider than any scrollbar.
   */
  padding-right: 50px;
}

<div class="crop">
  <div class="scroller">
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
  </div>
</div>

另外值得注意的是，::-webkit-scrollbar { display: none; } 在 Safari（当前版本 11.0.1）中用于隐藏启用了后退按钮的页面上的水平滚动条时会产生错误行为。

【讨论】：