隐藏垂直滚动条，但仍为 Firefox/IE/Edge 滚动答案

【问题标题】：Hide vertical scrollbar but still scroll for Firefox/IE/Edge隐藏垂直滚动条，但仍为 Firefox/IE/Edge 滚动
【发布时间】：2018-08-17 05:32:33
【问题描述】：

我知道这里已经介绍了很多，但似乎没有一个解决方案适合我。滚动条仍在 Windows 操作系统（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;
        }

【问题讨论】：

标签： css firefox scroll scrollbar overflow

【解决方案1】：

对于支持 webkit 的浏览器，您需要做的就是

::-webkit-scrollbar { display:none }

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

【讨论】：

我也尝试过display:none，但无济于事。我在上面帖子末尾提供的代码 sn-p 中的语法是否正确？只需将width 换成display 即可，否则，如果我正确声明它，那就意味着它不起作用。
嗯，奇怪。该语法应该可以正常工作，但它只适用于支持 webkit 的浏览器，如 safari 和 chrome。我使用它的时候它在我的 css 中是顶级的，我从来没有尝试过嵌套它，所以这可能是你的问题。
scrollbar-width: none 在 Firefox 64+ 中

【解决方案2】：

这会有点工作

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

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

【讨论】：

【解决方案3】：

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

这适用于 IE11、FF60.9 和 Chrome 80

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

【讨论】：