Question

我知道这里已经涉及很多，但没有一个解决方案对我有用。滚动条仍然显示在Windows操作系统（Firefox，Edge＆amp; 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，从父组件宽度减去子组件宽度或类似的东西，但这是一个非常类似的方法，只是更动态，我也不想要todo。

我试图用纯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方式可以做到这一点，因为它目前不支持滚动条自定义。请参阅相关的填充方法，这可能是您唯一的选择：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和Chrome 80

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

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

3 个答案: