隐藏Firefox/IE/Edge浏览器的垂直滚动条但仍能滚动内容

Question

我知道这个问题在这里已经被讨论过很多次，但是似乎没有一个解决方案适用于我的情况。在Windows操作系统上（Firefox、Edge和IE），滚动条仍然显示。

注意：我不想改变填充/边距

我可以通过某些方法使其消失，但我将失去滚动功能。以下是我尝试过的一些事情，可能会漏掉一些，因为我已经尝试了很多种方法。

::-webkit-scrollbar { width: 0px; }
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
overflow: -moz-hidden-scrollable;

除此之外还有一些尝试，但是像我说的那样，没有一个有效。我看到了一些常见的解决方案，比如通过修改padding来模拟隐藏滚动条，但我不想这样做，因为它可能会破坏某些设备上的样式。

我也看到了一些建议使用纯JavaScript，从父组件的宽度中减去子组件的宽度等等，但这是一个非常类似的方法，只是更加动态，而我也不想这样做。

我正在尝试使用纯CSS来实现这个功能。有什么好的想法吗？

当前代码：

.rec-left--body {
      padding: 0px 20px;
      .form-content {
        overflow-y: scroll;                // Chrome    <<  removes scrollbar
        overflow-x: hidden;                // Chrome    <<  removes scrollbar
        -ms-overflow-style: none;          // IE 10+    <<  removes scrollbar
        overflow: -moz-hidden-scrollable;  // Firefox   <<  removes scrollbar
        height: 48vh;
        margin: 10px 0px;
        padding: 0 15px;
        @media (min-width: $screen-sm) {
          height: 325px;
          padding: 0 10px;
        }
        .form-content::-webkit-scrollbar {
          width: 0px;
        }

- vin_Bin87

Answer 1

对于支持webkit的浏览器，你所需要做的就是：

::-webkit-scrollbar { display:none }

我认为在火狐浏览器中没有纯CSS的方法来实现这个功能，因为目前它不支持滚动条自定义。你可以参考相关资料使用填充的方式来实现，这可能是你唯一的选择：隐藏滚动条但仍然可以滚动。

- Julian Tennyson

---

我还尝试了在那里使用display:none，但没有成功。我的代码片段末尾提供的语法是否正确？只需将width替换为display，除此之外，如果我声明正确，那就意味着它不起作用。 - undefined

哦，奇怪。那个语法应该没问题，但是它只能在像safari和chrome这样支持Webkit的浏览器中工作。我使用它的时候它一直处于我的CSS顶层，我从未尝试过将其嵌套，所以可能是你的问题。 - undefined

在 Firefox 64+ 版本中，“scrollbar-width: none” 表示去掉滚动条的宽度。 - undefined

Answer 2

我知道你说你不想去处理填充或边距，但我有同样的感觉，我尝试了一切，对于我的解决方案来说最好的方法是始终显示垂直滚动条，然后添加一些负边距来隐藏它。

这在IE11、FF60.9和Chrome 80上都有效。

body {
  -ms-overflow-style: none; /** IE11 */
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -20px;
}

- scrub

Answer 3

这个有点用

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

但是当用户滚动时不会隐藏。更好的方法是将您的内容放在一个父div中，其中overflow被隐藏，但允许在子div内滚动。

- awtrimpe