在 Firefox 中隐藏滚动条

Question

我想在页面中隐藏滚动条，但我可以像滚动条一样滚动。 所以我不能使用溢出：隐藏，因为我希望我可以像正常一样滚动但看不到滚动条。

所以我使用这个 css 代码（class 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 64 中，如果您想在overflow:auto时隐藏滚动overflow:auto您现在可以执行scrollbar-width: none; ！ 呜呜呜！ 以下是相关文档（浏览器支持显示在页面底部）。

下面是一个简单的css 解决方案，它将在 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 2

根据这个答案以及我在网上能找到的所有内容，没有与-webkit-scrollbar选择器等效的 Firefox。 显然有曾经是一个属性， -moz-scrollbars-none ，你可以使用这个，但它后来被移除，人们推荐使用overflow:hidden或hackish的margin-right: -14px解决方案。

抱歉，我帮不上忙了——似乎没有 Firefox 方法可以优雅地做到这一点。

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

Answer 4

参见： https : //stackoverflow.com/a/41021131/4881677

我就是这样做的，只有 CSS，并且可以很好地与 bootstrap 等框架配合使用。 它只需要 2 个额外的 div：

如果您有触摸屏，您可以选择文本使其滚动或用手指滚动。

 .overflow-x-scroll-no-scrollbar {overflow:hidden;} .overflow-x-scroll-no-scrollbar div { overflow-x:hidden; margin-bottom:-17px; overflow-y:hidden; width:100%; } .overflow-x-scroll-no-scrollbar div * { overflow-x:auto; width:100%; padding-bottom:17px; white-space: nowrap; cursor:pointer } /* the following classes are only here to make the example looks nicer */ .row {width:100%} .col-xs-4 {width:33%;float:left} .col-xs-3 {width:25%;float:left} .bg-gray{background-color:#DDDDDD} .bg-orange{background-color:#FF9966} .bg-blue{background-color:#6699FF} .bg-orange-light{background-color:#FFAA88} .bg-blue-light{background-color:#88AAFF}

 <html><body> <div class="row"> <div class="col-xs-4 bg-orange">Column 1</div> <div class="col-xs-3 bg-gray">Column 2</div> <div class="col-xs-4 bg-blue">Column 3</div> </div> <div class="row"> <div class="col-xs-4 bg-orange-light">Content 1</div> <div class="col-xs-3 overflow-x-scroll-no-scrollbar"> <div> <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div> </div> </div> <div class="col-xs-4 bg-blue-light">Content 3</div> </div> </body></html>

懒人的简短版本：

 .overflow-x-scroll-no-scrollbar {overflow:hidden;} .overflow-x-scroll-no-scrollbar div { overflow-x:hidden; margin-bottom:-17px; overflow-y:hidden; width:100%; } .overflow-x-scroll-no-scrollbar div * { overflow-x:auto; width:100%; padding-bottom:17px; white-space: nowrap; cursor:pointer } /* the following classes are only here to make the example looks nicer */ .parent-style {width:100px;background-color:#FF9966}

 <div class="parent-style overflow-x-scroll-no-scrollbar"> <div> <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div> </div> </div>

Answer 5

我假设您想在本地隐藏滚动条。 我的意思是，不是在供全世界观看的网络服务器上，而是在您的本地 Firefox 副本上，仅用于您的“观看乐趣”。

这是我发现在 opensuse/kde 上对我有用的东西：在 userChrome.css 中；

#content browser {
margin-right -12px !important;
overflow-x:hidden;
overflow-y:scroll;
}

使用 -14px 完全隐藏垂直滚动（如果您的系统主题具有更宽的滚动设置，则更多）。 我使用 less (10px) 来查看它的一小部分，这样我就可以单击鼠标中键跳转到页面上的某个位置。

我做过但不再总是有效的事情：在 userContent.css 中

#content browser {
overflow:-moz-scrollbars-none;
}

-或者-

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

上面曾经可以工作，但我现在失去了鼠标滚轮滚动。 现在只有键盘箭头键有效。

希望我明白你想要什么，这会有所帮助。 兰迪斯。

Answer 6

您也许可以使用overflow:-moz-hidden-unscrollable - 这对我的需求非常有效，部分原因是我已经在使用dragscroll.js 。

Answer 7

由于我自己正在寻找它并且这个线程没有提供更新的答案，我会像我自己一样为其他新人提供它。

#element{
 scrollbar-width: none;
}

在 Firefox 中隐藏滚动条

问题描述

7 个解决方案

解决方案1
13 2019-01-08 19:34:58

解决方案2
9 2013-10-25 03:14:09

解决方案3
5 2014-09-18 05:10:34

解决方案4
1 2016-12-07 15:05:02

解决方案5
0 2016-05-25 09:12:09

解决方案6
0 2016-08-21 03:21:24

解决方案7
0 2020-09-08 10:06:29

在 Firefox 中隐藏滚动条

问题描述

7 个解决方案

解决方案1 13 2019-01-08 19:34:58

解决方案2 9 2013-10-25 03:14:09

解决方案3 5 2014-09-18 05:10:34

解决方案4 1 2016-12-07 15:05:02

解决方案5 0 2016-05-25 09:12:09

解决方案6 0 2016-08-21 03:21:24

解决方案7 0 2020-09-08 10:06:29

解决方案1
13 2019-01-08 19:34:58

解决方案2
9 2013-10-25 03:14:09

解决方案3
5 2014-09-18 05:10:34

解决方案4
1 2016-12-07 15:05:02

解决方案5
0 2016-05-25 09:12:09

解决方案6
0 2016-08-21 03:21:24

解决方案7
0 2020-09-08 10:06:29