CSS 如何在 Firefox 中隐藏滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20997183/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide scrollbar in Firefox?
提问by Daan Kleijngeld
I just found out how to hide the scrollbar in Google Chrome, I did it with this code:
我刚刚发现了如何在谷歌浏览器中隐藏滚动条，我用这个代码做到了：
::-webkit-scrollbar { display: none; }
The only problem is that this doesn't works on Firefox. Tried many ways to do is but still it doesn't work.
唯一的问题是这不适用于 Firefox。尝试了很多方法，但仍然不起作用。
回答by George Flint
You can use the scrollbar-widthrule. You can scrollbar-width: none;to hide the scrollbar in Firefox and still be able to scroll freely.
您可以使用该scrollbar-width规则。您可以scrollbar-width: none;在 Firefox 中隐藏滚动条，但仍然可以自由滚动。
body {
scrollbar-width: none;
}
回答by CrazyScientist
I was able to hide the scrollbar but still be able to scroll with mouse wheel with this solution:
我能够隐藏滚动条，但仍然能够使用此解决方案使用鼠标滚轮滚动：
html {overflow: -moz-scrollbars-none;}
Download the plugin https://github.com/brandonaaron/jquery-mousewheeland include this function:
下载插件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);
});
回答by Rowin
To hide scroll bar on Chrome, Firefox and IE you can use this:
要在 Chrome、Firefox 和 IE 上隐藏滚动条，您可以使用：
.hide-scrollbar
{
overflow: auto;
-ms-overflow-style: none; /* IE 11 */
scrollbar-width: none; /* Firefox 64 */
}
回答by Logan Powell
This is what I needed to disable scrollbars while preserving scroll in Firefox, Chrome and Edge in :
这是我需要禁用滚动条，同时在 Firefox、Chrome 和 Edge 中保留滚动条：
@-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 */
}
回答by romal tandel
For webkit use following:
对于 webkit 使用以下内容：
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
For Mozilla Firefox use following code:
对于 Mozilla Firefox，请使用以下代码：
@-moz-document url-prefix() {
html,body{overflow: hidden !important;}
}
and if scrolling does not work then add
如果滚动不起作用，则添加
element {overflow-y: scroll;}
to specific element
到特定元素
回答by Chris Aelbrecht
For more recent version of Firefox the old solutions don't work anymore, but I did succesfully used in v66.0.3 the scrollbar-colorproperty which you can set to transparent transparentand which will make the scrollbar in Firefox on the desktop at least invisible (still takes place in the viewport and on mobile doesn't work, but there the scrollbar is a fine line that is placed over the content on the right).
对于较新版本的 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;
回答by Myles
This is something of a generic solution:
这是一个通用的解决方案：
<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>
The scroll bar is hidden by the parent div.
滚动条被父 div 隐藏。
This requires you to use overflow:hidden in the parent div.
这需要您在父 div 中使用 overflow:hidden 。
回答by Ky_Pham
I used this and it worked. https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
我使用了这个并且它起作用了。 https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width
html {
scrollbar-width: none;
}
Note: User Agents must apply any scrollbar-width value set on the root element to the viewport.
注意：用户代理必须将在根元素上设置的任何滚动条宽度值应用到视口。
回答by John Carroll
I tried everything and what worked best for my solution was to always have the vertical scrollbar show, and then add some negative margin to hide it.
我尝试了所有方法，最适合我的解决方案是始终显示垂直滚动条，然后添加一些负边距来隐藏它。
This worked for IE11, FF60.9 and Chrome 80
这适用于 IE11、FF60.9 和 Chrome 80
body {
-ms-overflow-style: none; /** IE11 */
overflow-y: scroll;
overflow-x: hidden;
margin-right: -20px;
}
回答by Manmeet Kaur
::-webkit-scrollbar {
display: none;
}
It will not work in Firefox, as the Firefox abandoned the support for hidden scrollbars with functionality (you can use overflow: -moz-scrollbars-none;in old versions).
它在 Firefox 中不起作用，因为 Firefox 放弃了对具有功能的隐藏滚动条的支持（您可以overflow: -moz-scrollbars-none;在旧版本中使用）。
