火狐浏览器滚动条隐藏

Question

火狐浏览器滚动条隐藏

cssstyles

6

如何在使用“overflow:auto”时隐藏Firefox的滚动条？

::-webkit-scrollbar { display:none; }

我使用这段代码，但这只对Google Chrome有效。

有什么帮助吗？谢谢！

更新

当我使用

overflow:hidden;

我的页面无法滚动到页脚。

<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;
}

- Carlo Adap

2

为什么不使用 overflow: hidden？ - Linus Caldwell

请等一下，我会编辑我的帖子。 - Carlo Adap

好的，就我所看到的，您确实想要页脚在可视区域之外，但又不想看到滚动条。不确定这是否是一个非常好的想法，但无论如何。在这种情况下，我会选择Vucko的解决方案。 - Linus Caldwell

@VKen，这是一个问题，但是在滚动时请注意盒子阴影。 - Carlo Adap

不好意思打扰你们了！感谢在我的问题中回复。愿上帝保佑你们！ - Carlo Adap

显示剩余9条评论

2个回答

5

在firefox 64中，如果你想在使用overflow:auto时隐藏滚动条，你现在可以使用scrollbar-width: none;！太棒了！下面是一个仅使用CSS的解决方案，它将在firefox中隐藏垂直和水平滚动条（已在v64和firefox dev版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;
}

<div><span></span></div>

- protoEvangelion

这是一个实验性的功能！因此需要更多时间才能得到批准。 - Si7ius

1

被低估的评论，这实际上解决了Firefox的问题。我知道这是老话题，但还是谢谢你！ - Gandalf The Grey

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chowey · Accepted Answer

我没有找到任何特定于 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，但除此之外，可以完美地运行。