火狐浏览器中的隐藏滚动条（允许滚动但无滚动条）

Question

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

我希望避免使用JavaScript插件。希望能找到一个基于CSS或供应商特定的解决方案。

---

Webkit解决方案

#photoreel::-webkit-scrollbar {
    height: 0;
    width: 0;
}
#photoreel {
    overflow-x: scroll;
    overflow-y: hidden;
}

- Matt

Answer 1

你必须将可滚动的

包裹在另一个

中，并且该

需要使用overflow:hidden隐藏滚动条。

可以参考http://jsfiddle.net/qqPcb/中的示例。

顺便说一下：这个技巧也被一个很棒的jQuery插件jScrollPane所使用

- user123444555621

---

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

可以通过像这个例子中那样引入另一个包装 div 来轻松解决这个问题：http://jsfiddle.net/2E4Jg/ （或者使用几行 JavaScript 检测滚动条宽度来解决）。 - user123444555621

然而，我不确定能否使其与动态大小的div一起正常工作。 - user123444555621

请在Chrome/Safari中尝试您的演示：选择第一行（foo）并将鼠标向右拖动，您将看到滚动条。或者使用文本区域代替内部div，然后填写一些文本。然后使用键盘上的“Page Up”和“Page Down”键。 - Mori

Answer 2

2019年解决方法

自Firefox 64版本开始，此问题有一个非常简单的解决方案（仅适用于Firefox和Firefox移动版）。

scrollbar-width: none;

查看文档

对于来自被标记为重复的帖子的人，还有MS Edge解决方案：

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

- Ondra

Answer 3

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

对于 Firefox：
scrollbar-width: none;

- RandomCode

Answer 4

应用于具有滚动条的主体或元素。

也禁用了滚动功能（使内容不可滚动）。

- Cris

Answer 5

嗯，其实有更简单的方法！只需要放置

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

在你的 CSS 样式中添加这段代码，就完成了！

- Leonhard van Kann

---

他正在寻求有关Firefox的帮助，而不是Webkit。 - Joril