CSS Firefox 中的隐藏滚动条(允许滚动但没有滚动条)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5820304/
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
Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)
提问by Matt
I'd like to create a div that is able to scroll but does not display scrollbars. I have found a solution for Webkit (below) but how can this be done in other browsers?
我想创建一个能够滚动但不显示滚动条的 div。我已经找到了 Webkit 的解决方案(如下),但如何在其他浏览器中完成?
I'd prefer to avoid using a javascript plugin. Hoping to find a CSS or vendor specific solution.
我宁愿避免使用 javascript 插件。希望找到 CSS 或供应商特定的解决方案。
Webkit Solution
网络套件解决方案
#photoreel::-webkit-scrollbar {
height: 0;
width: 0;
}
#photoreel {
overflow-x: scroll;
overflow-y: hidden;
}
回答by user123444555621
You must wrap your scrollable div in another div with overflow:hidden
that hides the scrollbar.
您必须将可滚动 div 包装在另一个overflow:hidden
隐藏滚动条的div 中。
See http://jsfiddle.net/qqPcb/for an example.
有关示例,请参见http://jsfiddle.net/qqPcb/。
BTW: The same technique is used by a nice little jQuery plugin called jScrollPane
顺便说一句:一个名为 jScrollPane 的漂亮小 jQuery 插件使用了相同的技术
回答by Ondra
2019 solution
2019解决方案
Since Firefox 64 there is a perfectly simple solution for this (working only in Firefox and Firefox mobile)
由于 Firefox 64 有一个非常简单的解决方案(仅适用于 Firefox 和 Firefox mobile)
scrollbar-width: none;
Check the docs
检查文档
For the comers from the post marked as duplicate, there is also MS Edge solution:
对于标记为重复的帖子的来者,还有MS Edge解决方案:
-ms-overflow-style: -ms-autohiding-scrollbar;
回答by RandomCode
For Edge:-ms-overflow-style: none;
对于边缘:-ms-overflow-style: none;
For Firefox:scrollbar-width: none;
对于火狐:scrollbar-width: none;
回答by Cris
scrollbar-width:none
滚动条宽度:无
Applied to the body or the element with scroll bar.
应用于主体或带有滚动条的元素。
Overflow:hidden
溢出:隐藏
also disables the scrolling function (makes content not scrollable)
还禁用滚动功能(使内容不可滚动)
回答by Leonhard van Kann
well, there`s a much more easy way! just put
好吧,还有更简单的方法!就放
::-webkit-scrollbar {
width: 0px;
height: 10px;
}
in your css style and you're done with!
以你的 css 风格,你就完成了!