css - firefox 滚动条隐藏

标签 css styles

如何在 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;
}

最佳答案

我没有找到任何特定于 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,但除此之外的效果非常好。

关于css - firefox 滚动条隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15394065/

相关文章:

CSS3 3D 翻转卡片效果与 SVG 元素

css - 每边尺寸不同的盒状阴影

jquery - 根据容器子节点的数量计算 <article> 的高度()

html - 移动图像位置

javascript - PHP 后删除样式属性

javascript - 使用 JavaScript 访问 CSS 类

html - Bootstrap 动态按钮宽度

c# - 更改包含具有 ItemContainerStyle 上的控件模板并绑定(bind)到 CollectionViewSource 的列表框的选项卡时,应用程序崩溃

javascript - onChange 按钮标签不保持其样式

Android - 自定义样式中指定的边距未生效