代码之家  ›  专栏  ›  技术社区  ›  Retros

在Mozilla上用右边空白隐藏滚动条会把内容搞砸

  •  1
  • Retros  · 技术社区  · 7 年前

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

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

    我发现在Firefox中隐藏它的最好方法是设置右边距:在父分区上设置16px。在Firefox中,这看起来很棒。然而,这个问题现在出现在Chrome中,因为它将父div中的整个内容向右移动。如果我试图通过在父div内的容器中添加16px的右边距来修复它,那么它会把Firefox中的事情搞砸。

    谢谢

    2 回复  |  直到 7 年前
        1
  •  1
  •   brian17han    7 年前

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

    html {
        overflow: -moz-scrollbars-none;
    }
    
        2
  •  0
  •   Utpal Sarkar    7 年前

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

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

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

    所以利润只有Firefox,你没有什么可以改变的。

    https://developer.mozilla.org/en-US/docs/Web/CSS/overflow