Firefox 中的隐藏滚动条（允许滚动但没有滚动条）

Posted 2023-03-06

【中文标题】Firefox 中的隐藏滚动条（允许滚动但没有滚动条）

【英文标题】：Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)

【发布时间】：2011-08-14 18:52:38

【问题描述】：

我想创建一个能够滚动但不显示滚动条的 div。我找到了 Webkit 的解决方案（如下），但是如何在其他浏览器中完成呢？

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

---

Webkit 解决方案

#photoreel::-webkit-scrollbar 
    height: 0;
    width: 0;

#photoreel 
    overflow-x: scroll;
    overflow-y: hidden;

【参考方案1】：

对于（Chromium 之前的）Edge：-ms-overflow-style: none;

对于 Firefox：scrollbar-width: none;

【参考方案2】：

滚动条宽度：无

应用于正文或带有滚动条的元素。

溢出：隐藏

还禁用滚动功能（使内容不可滚动）

【参考方案3】：

2019年解决方案

从 Firefox 64 开始，有一个非常简单的解决方案（仅适用于 Firefox 和 Firefox 移动版）

scrollbar-width: none;

查看docs

对于标记为duplicate的帖子的人，还有MS Edge的解决方案：

-ms-overflow-style: -ms-autohiding-scrollbar;

【参考方案4】：

嗯，有一个更简单的方法！就放

    ::-webkit-scrollbar 
    width: 0px;
    height: 10px;
               

在你的 css 风格中，你完成了！

【讨论】：

他正在寻求 Firefox 的帮助，而不是 Webkit

【参考方案5】：

您必须使用隐藏滚动条的overflow:hidden 将可滚动的 div 包裹在另一个 div 中。

有关示例，请参阅 http://jsfiddle.net/qqPcb/。

顺便说一句：a nice little jQuery plugin called jScrollPane 使用了相同的技术

【讨论】：

如图所示，可滚动 div 比包装 div 宽。但是，这也假定滚动条的（最大）宽度。该宽度取决于操作系统、浏览器和用户设置，因此假设任何宽度都会导致滚动条消失而不使任何内容消失可能是不安全的。

@Arjan 这可以很容易地解决引入另一个包装 div 就像在这个例子中：jsfiddle.net/2E4Jg （或通过使用几行 JS 检测滚动条宽度）

但是，我不确定是否可以使其与动态大小的 div 一起使用

在 Chrome/Safari 中尝试您的演示：突出显示/选择第一行 (foo) 并将鼠标向右拖动，您将看到滚动条。或者使用 textarea 而不是内部 div，然后用一些文本填充它。然后使用键盘键Page Up 和Page Down。