Question

所以我用这段代码将我的滚动条隐藏在Chrome上：

 ::-webkit-scrollbar {
    width: 0px;
    background: transparent; 
  }

我发现在Firefox中隐藏它的最好方法是在父div上设置margin-right：-16px。在Firefox中，这看起来很棒。但是，问题现在出现在Chrome中，因为它会将父div中的整个内容向右移动。如果我尝试通过向父div中的容器添加margin-right：16px来修复它，那么它会在Firefox中混乱。

我确定你以前遇到过这个问题，但有什么办法可以解决这个问题吗？任何已知的方案？谢谢！

Answer 1

如果您只想在视觉上隐藏滚动条并仍然允许用户使用鼠标或键盘滚动，您可以尝试以下css：

html {
    overflow: -moz-scrollbars-none;
}

Answer 2

你只能为chrome提供填充

::-webkit-scrollbar {
    width: 0px;
    background: transparent; 
    -webkit-padding-end: 16px;
  }

或者只在父div上设置-webkit-padding-end: 16px; 你也可以在Firefox上使用相同的想法，只需设置这个

@-moz-document url-prefix() {
    parent div {
        margin-right: -16px;
    }
}

因此，保证金只能获得Firefox，而且您无需更改任何内容。

@ - moz-scrollbars-none如果你转到https://developer.mozilla.org/en-US/docs/Web/CSS/overflow并查看Mozilla Extensions部分，它会说“-moz-scrollbars-none”是“过时的API，不再保证可以工作“。最好采用更稳定的方法。

使用margin-right隐藏Mozilla上的滚动条会使内容混乱

2 个答案: