如何在 Firefox 中隐藏滚动条？

这是一种通用的解决方案:

<div class="outer">
<div class="inner">
Some content...
</div>
</div>


<style>
.outer {
overflow: hidden;
}
.inner {
margin-right: -16px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>

滚动条被父 div 隐藏。

这需要您使用 overflow: 隐藏在父 div 中。

I was able to hide the scrollbar but still be able to scroll with mouse wheel with this solution:

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

试着用这个:

overflow-y: -moz-hidden-unscrollable;

使用网络工具包:

::-webkit-scrollbar {
width: 0px;  /* remove scrollbar space */
background: transparent;  /* optional: just make scrollbar invisible */
}

对于 Mozilla Firefox，请使用以下代码:

@-moz-document url-prefix() {
html,body{overflow: hidden !important;}
}

如果滚动不起作用，那么添加

element {overflow-y: scroll;}

到特定的元素

在某些特定的情况下(元素在屏幕的最右边，或者它的父溢出被隐藏) ，这可以是一个解决方案:

@-moz-document url-prefix() {
.element {
margin-right: -15px;
}
}

You can use the scrollbar-width rule. You can scrollbar-width: none; to hide the scrollbar in Firefox and still be able to scroll freely.

body {
scrollbar-width: none;
}

为了隐藏 Chrome，Firefox 和 IE 上的滚动条，你可以这样做:

.hide-scrollbar
{
overflow: auto;
-ms-overflow-style: none; /* IE 11 */
scrollbar-width: none; /* Firefox 64 */
}

This is what I needed to disable scrollbars while preserving scroll in Firefox, Chrome and Edge in :

          @-moz-document url-prefix() { /* Disable scrollbar Firefox */
html{
scrollbar-width: none;
}
}
body {
margin: 0; /* remove default margin */
scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
-ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
overflow-y: scroll;
}
body::-webkit-scrollbar {
width: 0px;
background: transparent; /* Disable scrollbar Chrome/Safari/Webkit */
}

对于最新版本的 Firefox，旧的解决方案已经不能工作了，但是我在 v66.0.3中成功地使用了 scrollbar-color属性，你可以将其设置为 transparent transparent，这将使 Firefox 的滚动条至少在桌面上不可见(仍然发生在视窗和移动设备上不能工作，但是滚动条在右边的内容上方有一条细线)。

overflow-y: auto; //or hidden if you don't want horizontal scrolling
overflow-y: auto;
scrollbar-color: transparent transparent;

我用了这个，它起作用了。 Https://developer.mozilla.org/en-us/docs/web/css/scrollbar-width

html {
scrollbar-width: none;
}

注意: 用户代理必须将根元素上设置的任何滚动条宽度值应用到 viewport。

我尝试了所有方法，对我的解决方案最有效的方法是始终保持垂直滚动条显示，然后添加一些负边距来隐藏它。

这适用于 IE11、 FF60.9和 Chrome 80

body {
-ms-overflow-style: none; /** IE11 */
overflow-y: scroll;
overflow-x: hidden;
margin-right: -20px;
}

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

它不能在 Firefox 中工作，因为 Firefox 放弃了对带有功能的隐藏滚动条的支持(在旧版本中可以使用 overflow: -moz-scrollbars-none;)。

以防万一，如果有人正在寻找一个黑客，以某种方式使滚动条在 Firefox (79.0)中不可见。

Here's a solution that successfully works for Chrome, IE, Safari, and makes the scrollbar transparent in Firefox. None of the above worked for firefox(79.0) in truly hiding the scrollbar.

如果有人能找到一种不改变颜色的方法，那将是非常有帮助的。请在下面评论。

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


.scrollhost ::-moz-scrollbar {
display: none;
 

}
 

.scrollhost {
overflow: auto;
-ms-overflow-style: none;
scrollbar-color: transparent transparent; /*just hides the scrollbar for firefox */
}

I got it working for me in ReactJS using create-react-app by putting this in my App.css:

@-moz-document url-prefix() {
html,
body {
scrollbar-width: none;
}
}

而且，body元素具有 overflow: auto

如果您希望滚动条在整个主体上消失，并且仍然具有功能性，那么可以在 html 代码顶部的 style 标记下添加这个功能。这为我解决了问题。

参考资料: https://careerkarma.com/blog/hide-scrollbar/

      * {


scrollbar-width: none; /* Firefox implementation */


}

如果您想在 Firefox 上隐藏扩展弹出选项，请尝试以下操作

  html {
scrollbar-width: none;
}

更新: 2022年

This block of code will hide both the horizontal and vertical scrollbars on Mozilla Firefox. Version 101.0.1测试

index.css

body {
-ms-overflow-style: none; /** For IE */
overflow-y: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {display:none;}
@-moz-document url-prefix() {
html,
body {
scrollbar-width: none;
}
}

隐藏滚动条，但仍然能够继续滚动,

  /* Hide scrollbar for Chrome, Safari and Opera */


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


/* Hide scrollbar for IE, Edge and Firefox */


* {
-ms-overflow-style: none;
scrollbar-width: none;
}