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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:25:12  来源:igfitidea点击:

Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)

cssfirefoxscrollbar

提问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:hiddenthat 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 风格,你就完成了!