Html 在 Firefox 中隐藏滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19580366/
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
Hide scrollbar in firefox
提问by Mei
I want to hide a scroll bar in page but I can scroll like it has a scroll bar. so I cant use overflow:hidden because I want that I can scroll like normal but cannot see a scroll bar.
我想在页面中隐藏滚动条，但我可以像滚动条一样滚动。所以我不能使用溢出：隐藏，因为我希望我可以像正常一样滚动但看不到滚动条。
so I use this css code (class not-scroll-body is a class of body tag)
所以我使用这个 css 代码（class not-scroll-body 是一个 body 标签类）
.not-scroll-body::-webkit-scrollbar {
display: none;
}
It works in Chrome, but when I use -moz-instead of -webkit-like this
它适用于 Chrome，但是当我使用-moz-而不是-webkit-这样
.not-scroll-body::-moz-scrollbar {
display: none;
}
It doesn't work in Firefox.
它在 Firefox 中不起作用。
What can I do to to make it work?
我该怎么做才能让它发挥作用？
Thank you for every answer and sorry for my poor english language :)
感谢您的每一个回答，并为我糟糕的英语感到抱歉:)
回答by protoEvangelion
In firefox 64, if you want to hide scroll when you have overflow:autoyou can now do scrollbar-width: none;! Woop woop! Here are the relevant docs(browser support is show at bottom of page).
在Firefox 64 中，如果您想隐藏滚动条，overflow:auto现在可以这样做scrollbar-width: none;！呜呜呜！以下是相关文档（浏览器支持显示在页面底部）。
Below is a simple css only solutionthat will hide your vertical and horizontal scrollbar in firefox (tested in v64 & firefox dev edition v65.0b8). Hint: try vertical and horizontal scrolling on the blue div.
下面是一个简单的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>回答by Christian Ternus
According to this answerand everything I've been able to find on the web, there's no Firefox equivalent of the -webkit-scrollbarselector. Apparently there used to bea property, -moz-scrollbars-none, that you could use for this, but it's since been removed and people recommendusing overflow:hiddenor a hackish margin-right: -14pxsolution.
根据这个答案以及我在网上能找到的所有内容，没有与-webkit-scrollbar选择器等效的 Firefox 。显然有曾经是一个属性-moz-scrollbars-none，你可以使用这个，但它既然被删除，人们推荐使用overflow:hidden或hackish的margin-right: -14px解决方案。
Sorry I can't be more helpful -- it seems like there's no Firefox way to do this elegantly.
抱歉，我帮不上忙了——似乎没有 Firefox 方法可以优雅地做到这一点。
回答by CrazyScientist
I was able to hide the scrollbar but still be able to scroll with mousewheel 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 Jean
cf: https://stackoverflow.com/a/41021131/4881677
参见：https: //stackoverflow.com/a/41021131/4881677
This is how I do it, only CSS and works well with frameworks like bootstrap. It only needs 2 extra div:
我就是这样做的，只有 CSS，并且可以很好地与 bootstrap 等框架配合使用。它只需要 2 个额外的 div：
You can select the text to make it scroll or scroll it with fingers if you have a touchscreen.
如果您有触摸屏，您可以选择文本使其滚动或用手指滚动。
.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>Short version for lazy people:
懒人的简短版本：
.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>回答by Landis Reed
I assuming you want to hide the scrollbar locally. In that i mean, not on a web server for the world to see, but on your local copy of firefox, for your 'viewing pleasure' only.
我假设您想在本地隐藏滚动条。我的意思是，不是在供全世界观看的网络服务器上，而是在您的本地 Firefox 副本上，仅用于您的“观看乐趣”。
this is what I've found to work for me on opensuse/kde: in userChrome.css;
这是我发现在 opensuse/kde 上对我有用的东西：在 userChrome.css 中；
#content browser {
margin-right -12px !important;
overflow-x:hidden;
overflow-y:scroll;
}
use -14px to completely hide vertical-scroll (more if your system theme has wider scroll setting). I use less (10px) to see just a little of it so I can middle-click to jump to a place on the page.
使用 -14px 完全隐藏垂直滚动（如果您的系统主题具有更宽的滚动设置，则更多）。我使用 less (10px) 来查看它的一小部分，这样我就可以单击鼠标中键跳转到页面上的某个位置。
thing that i did, but don't always work, any longer: in userContent.css
我做过但不再总是有效的事情：在 userContent.css 中
#content browser {
overflow:-moz-scrollbars-none;
}
-or-
-或者-
html {
overflow: -moz-scrollbars-none;}
}
above used to work, but I now I've lost the mouse-wheel scroll. Only keyboard arrow keys work now.
上面曾经可以工作，但我现在失去了鼠标滚轮滚动。现在只有键盘箭头键有效。
Hope I understood what you want and this helps. Landis.
希望我明白你想要什么，这会有所帮助。兰迪斯。
回答by Jon Maloto
You might be able to use overflow:-moz-hidden-unscrollable-- this worked perfectly for my needs in part because I was already using dragscroll.js.
您也许可以使用overflow:-moz-hidden-unscrollable- 这对我的需求非常有效，部分原因是我已经在使用dragscroll.js。
