Firefox中的隐藏滚动条(允许滚动但不滚动条)

Mat*_*att 47 css firefox scrollbar

我想创建一个能够滚动但不显示滚动条的div.我找到了Webkit的解决方案(如下)但是如何在其他浏览器中完成?

我宁愿避免使用javascript插件.希望找到CSS或供应商特定的解决方案.


Webkit解决方案

#photoreel::-webkit-scrollbar {
    height: 0;
    width: 0;
}
#photoreel {
    overflow-x: scroll;
    overflow-y: hidden;
}
Run Code Online (Sandbox Code Playgroud)

use*_*621 52

您必须将可滚动div包装在另一个div中,overflow:hidden并隐藏滚动条.

有关示例,请参见http://jsfiddle.net/qqPcb/.

BTW:一个名为jScrollPane的小jQuery插件使用了相同的技术

  • 如图所示,可滚动div比包装div宽.但是,这也假设滚动条的(最大)宽度.该宽度取决于操作系统,浏览器和用户设置,因此假设任何宽度都会导致滚动条消失而不使任何内容消失可能是不安全的. (4认同)
  • @Arjan这可以很容易地解决,引入另一个包装器div,如下例所示:http://jsfiddle.net/2E4Jg/(或通过使用几行JS检测滚动条宽度) (4认同)

Ond*_*dra 10

2019解决方案

由于 Firefox 64 有一个非常简单的解决方案(仅适用于 Firefox 和 Firefox mobile)

scrollbar-width: none;
Run Code Online (Sandbox Code Playgroud)

检查文档

对于标记为重复的帖子的来者,还有MS Edge解决方案:

-ms-overflow-style: -ms-autohiding-scrollbar;
Run Code Online (Sandbox Code Playgroud)