Question

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

我知道我可以使用

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

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

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

有人可以帮我这个吗？

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

Answer 1

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

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

Answer 2

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

2 个答案: