Menu
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;
}
609
Click the File tab. Click Options, and then click the Advanced category. Under Display options for this workbook, clear or select the Show horizontal scroll bar check box and Show vertical scroll bar check box to hide or display the scroll bars.
Click Start > Settings. Under Windows Settings, scroll down, and then click Ease of Access > Display. Scroll down, and then set Automatically hide scroll bars in Windows to Off.
Chosen solution If you hide the scrollbar with root{ scrollbar-width: none } then this hides all the scroll bars and you can't differentiate.
Click on Start > Ease of Access. Scroll down on the left and Check or uncheck Automatically hide scroll bars in Windows.
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.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
