隐藏垂直滚动条但仍滚动 Firefox/IE/Edge

Question

我知道这里已经介绍了很多，但是 none 的解决方案似乎对我有用。滚动条仍然显示在 Windows OS（Firefox、Edge 和 IE）上。

Note: I don't want to mess with padding/margins

我可以让它消失，但我失去了滚动功能。以下是我尝试过的一些东西，由于我经历了很多次迭代，我可能会忘记一些。

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

还有其他一些，但正如我所说，没有任何效果。我确实看到一些常见的解决方案正在改变填充以假使滚动条消失，但我不想这样做，因为担心它可能会破坏某些设备上的样式。

我也看到了一些建议来做纯 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;
        }

Answer 1

您需要为 webkit-enabled 浏览器做的就是

::-webkit-scrollbar { display:none }

我认为在 firefox 中没有纯粹的 CSS 方法可以做到这一点，因为它目前不支持自定义滚动条。有关使用填充的方法，请参阅相关内容，这可能是您唯一的选择：Hide scroll bar, but while still being able to scroll.

Answer 2

这会有点用

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

但不会在用户滚动时隐藏。更好的方法是将您的内容放在隐藏溢出的父级 div 中，但允许在您的子级 div.

中滚动

Answer 3

我知道你说你不想弄乱填充或边距，但我也有同感，我尝试了所有方法，对我的解决方案最有效的是始终显示垂直滚动条，然后添加一些负数保证金隐藏它。

这适用于 IE11、FF60.9 和 Chrome80

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

隐藏垂直滚动条但仍滚动 Firefox/IE/Edge

Hide vertical scrollbar but still scroll for Firefox/IE/Edge

css

firefox

scroll

overflow

scrollbar