6

How can I hide Firefox scroll bars when overflow:auto?

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

I use this code but this only works on Google Chrome.

any help guys? Thank you!

Updated

when I used

overflow:hidden;

my page can't proceed to footer.

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

my 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
  • 157
  • 1
  • 2
  • 9
  • 2
    Why don't you use `overflow: hidden`? – Linus Caldwell Mar 13 '13 at 18:59
  • I'll try that sir, thank you. but there's no way to hide scroll bars in Firefox when using overflow:auto? – Carlo Adap Mar 13 '13 at 19:12
  • it's not working I can't see my footer :| – Carlo Adap Mar 13 '13 at 19:15
  • `overflow-x: hidden`. Would be easier to help if we could see your code. – Linus Caldwell Mar 13 '13 at 19:20
  • wait I will edit my post – Carlo Adap Mar 13 '13 at 19:22
  • [overflow scolling with no scrollbars](http://stackoverflow.com/a/15314553/1763929). – Vucko Mar 13 '13 at 19:23
  • I'm not sure I understand why you don't want scrollbars if your page runs longer than the browser window height, and yet needs to see the footer that's below the "fold". Perhaps you can explain further? – VKen Mar 13 '13 at 19:31
  • @VKen bro, in firefox it displays 2 scroll bars if using overflow:auto the scroll bar for your browser and a scroll bar in div – Carlo Adap Mar 13 '13 at 19:33
  • Well than, as far as I can see you really want the footer outside the viewable area but don't want to see scrollbars. Not sure, if this is a very good idea, but however. In this case I would go for Vucko's solution. – Linus Caldwell Mar 13 '13 at 19:34
  • @Vucko bro it drags my div from center to right. – Carlo Adap Mar 13 '13 at 19:36
  • @CarloAdap because it's positioned `absolute`. Put everything in a `relative` div and it should work. – Vucko Mar 13 '13 at 19:40
  • @VKen it's but look at the box shadow when scrolling. – Carlo Adap Mar 13 '13 at 19:49
  • Hmm, could you explain what is the final design/interaction you're trying to achieve? From my understanding, maybe you want scrolling in the `aside` and `section`? Don't set scrolling in the `#pageWrapper` wrapper and you won't have double scrollbars on the right. I'm not sure where the box "shadow" is. I'm guessing the white bar below the `footer` can be solved by not setting `height`, use `line-height` instead. http://jsfiddle.net/kjAWd/2/ – VKen Mar 13 '13 at 19:55
  • sorry to bother you guys.! thank you for replying here in my question. god bless! – Carlo Adap Mar 13 '13 at 20:05

2 Answers2

17

I didn't find anything specific to Firefox. I have also been looking for an equivalent to ::-webkit-scrollbar { display:none }.

What I did find, however, is a generic cross-browser solution:

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

The scroll bar is hidden by the parent div.

This requires you to use overflow:hidden in the parent div, but otherwise works like a charm.

chowey
  • 9,138
  • 6
  • 54
  • 84
  • If you choose this option take in consideration scrollbars have different sizes on each browser, pay special attention with touch screen devices. – Grirg Sep 14 '17 at 15:50
  • It deosn't work on FF 56 when inner div content is longer than screen width – Mr Jedi Nov 04 '17 at 19:37
  • Tweaking the margin is a great workaround for this (note that if you want to hide the horizontal scrollbar then use margin-bottom: -17px;). Personally I would use 17px rather than 16px because I think that is the scrollbar width/height. – Mike Poole Apr 29 '19 at 10:40
5

In firefox 64, if you want to hide scroll when you have overflow:auto you can now do scrollbar-width: none;! Woop woop! Here are the relevant docs (browser support is show at bottom of page).

Below is a css only solution that will hide your vertical and horizontal scrollbar in firefox (tested in v64 & firefox dev edition v65.0b8). Hint: try vertical and horizontal scrolling on the blue 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
  • 4,355
  • 2
  • 29
  • 38