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

Question

我知道这在这里已经涵盖了很多，但似乎没有一个解决方案对我有用。滚动条仍在 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;
        }

Answer 1

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

::-webkit-scrollbar { display:none }

我不相信在 Firefox 中有一种纯 CSS 方法可以做到这一点，因为它目前不支持滚动条自定义。有关使用填充执行此操作的方法，请参阅相关内容，这可能是您唯一的选择：隐藏滚动条，但仍然可以滚动。