Firefox滚动条隐藏

Posted

技术标签:

【中文标题】Firefox滚动条隐藏【英文标题】:firefox scroll bar hidden 【发布时间】: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。如果我们能看到您的代码,会更容易提供帮助。 等我编辑我的帖子 【参考方案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 的问题。我知道这是旧的,但谢谢!

以上是关于Firefox滚动条隐藏的主要内容,如果未能解决你的问题,请参考以下文章

Firefox 中的隐藏滚动条(允许滚动但没有滚动条)

Firefox滚动条隐藏

Firefox滚动条隐藏

Firefox滚动条隐藏

chrome,firefox,safari,firefox,ie隐藏滚动条

html滚动条隐藏后不能滚动,隐藏滚动条,但仍然可以滚动