Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)
You must wrap your scrollable div in another div with overflow:hidden
that hides the scrollbar.
See http://jsfiddle.net/qqPcb/ for an example.
BTW: The same technique is used by a nice little jQuery plugin called jScrollPane
Only hide scrollbar, not disable scrollbar on Firefox Windows
This cannot be solved only using CSS. The issue open against Firefox is under discussion for more than 6 years.
Here are the details : https://bugzilla.mozilla.org/show_bug.cgi?id=77790#c188
There is no solution to this problem until Firefox Devs allow scrollbar customization through what is termed as "CSS Scrollbar Modules".
Until then, Firefox on Windows will have ugly-thick-visible-grey scrollbars.
Hide scroll bar, but while still being able to scroll
Just a test which is working fine.
#parent{
width: 100%;
height: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}
Working Fiddle
JavaScript:
Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth
, the exact scrollbar width will show up.
JavaScript Working Fiddle
Or
Using Position: absolute
,
#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}
Working Fiddle
JavaScript Working Fiddle
Information:
Based on this answer, I created a simple scroll plugin.
Hide vertical scrollbar but still scroll for Firefox/IE/Edge
All you need to do for webkit-enabled browsers is
::-webkit-scrollbar { display:none }
I don't believe there is a pure CSS way to do this in firefox, as it doesn't currently support scrollbar customization. see related for the way to do it with padding, which might be your only option:Hide scroll bar, but while still being able to scroll.
Related Topics
Css3 Animation Not Working in Safari
Sass Variable in CSS Calc() Function
How to Validate Vendor Prefixes in CSS Like -Webkit- and -Moz-
Transition of Background-Color
Style Disabled Button With Css
How to Set Border'S Thickness in Percentages
Content Url Does Not Display Image on Firefox Browser
:Not() Selector Not Behaving the Same Between Safari and Chrome/Firefox
Drop Shadow For Png Image in Css
How to Make React CSS Import Component-Scoped
How to Animate Handwriting Text on the Web Page Using Svg
Internet Explorer @Font-Face Is Failing
Sub-Pixels Calculated and Rendered Differently Among Browsers