在Firefox中隐藏滚动条

Question

我想隐藏页面中的滚动条,但我可以像滚动条那样滚动.所以我不能使用溢出:隐藏因为我想我可以像平常一样滚动但看不到滚动条.

所以我使用这个css代码(类not-scroll-body是一类body标签)

.not-scroll-body::-webkit-scrollbar {
    display: none; 
}

它可以在Chrome中使用,但是当我使用它-moz-而不是-webkit-像这样

.not-scroll-body::-moz-scrollbar {
    display: none; 
}

它在Firefox中不起作用.

我该怎么做才能让它发挥作用？

谢谢你的每一个答案,抱歉我的英语很差:)

Answer 1

根据这个答案和我在网上找到的所有东西,没有Firefox相当于-webkit-scrollbar选择器.显然有曾经是一个属性-moz-scrollbars-none,你可以使用这个,但它既然被删除,人们推荐使用overflow:hidden或hackish的margin-right: -14px解决方案.

对不起,我无法提供更多帮助 - 好像没有Firefox方法可以做到这一点.

Answer 2

在firefox 64中，如果要在拥有时隐藏滚动，则overflow:auto可以立即执行scrollbar-width: none;！哇！这是相关的文档（浏览器支持在页面底部显示）。

下面是一个简单的css only解决方案，它将在firefox中隐藏您的垂直和水平滚动条（已在v64和firefox开发版v65.0b8中进行了测试）。提示：尝试在蓝色div上垂直和水平滚动。

.not-scroll-body {
  overflow: auto;
  height: 200px;
  width: 90%;
  background: linear-gradient(to bottom, cyan, blue);
  white-space: no-wrap;

  /* the line that rules them all */
  scrollbar-width: none;
  /* */
}

span {
  width: 200%;
  height: 400%;
  background: linear-gradient(to left, green, yellow);
  display: inline-block;
  margin: 5rem;
}

<div class="not-scroll-body"><span></span></div>

Answer 3

我能够隐藏滚动条但仍然能够使用鼠标滚轮滚动此解决方案:

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

下载插件https://github.com/brandonaaron/jquery-mousewheel并包含此功能:

jQuery('html,body').bind('mousewheel', function(event) {
    event.preventDefault();
    var scrollTop = this.scrollTop;
    this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
    //console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
  });