Firefox滚动条隐藏答案

【问题标题】：firefox scroll bar hiddenFirefox滚动条隐藏
【发布时间】：2013-03-01 21:42:19
【问题描述】：

如何在 overflow:auto 时隐藏 Firefox 滚动条？

::-webkit-滚动条 { 显示：无； }

我使用此代码，但这仅适用于 Google Chrome。

有什么帮助吗？谢谢！

更新

我用的时候

溢出：隐藏；

我的页面无法进入页脚。

<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>

<div id="pageWrapper">
    <header></header><!--end of header-->

    <nav>
        <ul>
            <li><a href="#">Home</a></li>|
            <li><a href="#">Services</a></li>|
            <li><a href="#">Gallery</a></li>|
            <li><a href="#">FAQ</a></li>|
            <li><a href="#">About Us</a></li>|
        </ul>
    </nav><!--end of nav-->

    <aside>

    </aside><!--end of aside-->

    <section>
    </section><!--end of section-->
    <footer>All Right Reserved 2013.</footer><!--end of footer-->
</div><!--end of pageWrapper-->

</body>
</html>

我的 CSS

/*----- Reset ----*/
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, address, code, img, small, strong,
dl, dt, dd, ol, ul, li, fieldset, form, label{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body{
line-height:1.5;
font-family: helvetica, arial, sans-serif;
}

body,html{
    height:100%;
    background-color:whitemsoke;
}

ol, ul{
list-style:none;
}

/* ---- END OF RESET --- */
#pageWrapper{
    width:965px;
    height:100%;
    margin:auto;
    box-shadow:1px 1px 17px black;
    overflow:hidden;
}
::-webkit-scrollbar { 
    display:none; 
}
header{
    background-color: #D4E7ED;
    height:200px;
}
nav{
    text-align:center;
    background-color:#003366;
    padding:10px;
}
nav ul li{
    display:inline;
    padding:20px;
}
nav ul li a{
    text-decoration:none;
    color:whitesmoke;
}
nav ul li a:hover{
    text-decoration:underline;
}
aside{
    width:200px;
    background-color:#666666;
    height:100%;
    overflow:hidden;
    float:left;
    margin:0 auto -20px 0;
}
section{
    background-color:#CCCCCC;
    height:100%;
    margin:0 auto -20px 0;
    overflow:hidden;
}
footer{
    background-color:#003366;
    height:20px;
    position:relative;
}

【问题讨论】：

你为什么不用overflow: hidden？
我会试试的，先生，谢谢。但是在使用 overflow:auto 时无法在 Firefox 中隐藏滚动条？
它不工作我看不到我的页脚：|
overflow-x: hidden。如果我们能看到您的代码，会更容易提供帮助。
等我编辑我的帖子

标签： css styles

【解决方案1】：

我没有找到任何特定于 Firefox 的内容。我也一直在寻找相当于::-webkit-scrollbar { display:none }。

然而，我发现的是一个通用的跨浏览器解决方案：

<div class="outer">
    <div class="inner">
        Some content...
    </div>
</div>

<style>
.outer {
    overflow: hidden;
}
.inner {
    margin-right: -16px;
    overflow-y: scroll;
    overflow-x: hidden;
}
</style>

滚动条被父div隐藏。

这要求您在父 div 中使用 overflow:hidden，但在其他方面就像一个魅力。

【讨论】：

如果您选择此选项，请考虑到每个浏览器上滚动条的大小不同，请特别注意触摸屏设备。
当内部 div 内容长于屏幕宽度时，它在 FF 56 上不起作用
调整边距是一个很好的解决方法（请注意，如果要隐藏水平滚动条，请使用 margin-bottom: -17px;）。我个人会使用 17px 而不是 16px，因为我认为这是滚动条的宽度/高度。

【解决方案2】：

在 firefox 64 中，如果您想在拥有 overflow:auto 时隐藏滚动，现在可以使用 scrollbar-width: none;！呜呜呜！ Here are the relevant docs（浏览器支持显示在页面底部）。

下面是一个纯 CSS 解决方案，它将隐藏您在 firefox 中的垂直和水平滚动条（在 v64 和 firefox dev edition v65.0b8 中测试）。提示：尝试在蓝色 div 上进行垂直和水平滚动。

div {
  overflow: auto;
  height: 200px;
  width: 80%;
  background: linear-gradient(to bottom, cyan, blue);
  white-space: no-wrap;

  /* the line that rules them all */
  scrollbar-width: none;
  /* */
}

span {
  width: 200%;
  height: 50%;
  background: linear-gradient(to left, green, yellow);
  display: inline-block;
  margin: 5rem;
}

&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;

【讨论】：

这是一个实验性功能！所以它需要更多的时间来获得批准
被低估的评论，这实际上解决了 Firefox 的问题。我知道这是旧的，但谢谢！