How to hide scrollbar from mozilla firefox?
You can do the following
<div style='width: 100%;height:300px;'>
<div style='height: 100%; overflow: auto; margin-right: -15px;'>
//your overflowing content
</div>
</div>
Here height in parent div depends on your usecase.
The margin-right property in the inner div is the scrollbar width that can be computed from javascript as follows.
var div = document.createElement('div');
div.setAttribute('style', "width: 100%;height: 100%;position: absolute;overflow: auto;visibility: hidden;");
document.body.appendChild(div);
div.innerHTML = '<div style="width: 100%;height: 200%;"></div></div>';
var scrollWidth = div.offsetWidth - div.clientWidth;
div.parentNode.removeChild(div);
return scrollWidth;
You have to set the returned 'scrollWidth' data as negative 'margin-right' to the child container.
This will work on all browsers.
NOTE: The margin-right property should be set after checking whether the content is overflowing. Or else you will have some width problems.
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.
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
Hide scrollbar in Firefox 59.0
You can't modify scrollbar design in Firefox, but if want to hide that scrollbar, Then use margin-left
negative value.
* { box-sizing: border-box; font-family: Roboto, sans-serif;}
.container { display: flex; flex-direction: row; width: 30rem; height: 22rem; border-radius: 3rem; border: solid 0.2rem #b2b2c2; background-color: LightSlateGray; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;}
.scrollport:before,.scrollport:after { content: "";}
.scrollport { display: flex; flex-direction: column; flex-wrap: nowrap; width: 9.4rem; height: 22rem; overflow: auto; scroll-snap-type: y mandatory; scrollbar-width: none; margin-left: -20px; background: LightSlateGray;}
.scrollport:before,.scrollport:after,.cell { display: block; scroll-snap-align: center; flex-grow: 1; flex-shrink: 0; flex-basis: 33.3%; display: flex; justify-content: center; align-items: center; font-size: 2.4rem;}
.container:before { content: ''; position: absolute; top: 0; bottom: 0; width: 21px; background: LightSlateGray; right: 38px;}
<div class="container"> <div class="scrollport"> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> </div> <div class="scrollport"> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> </div> <div class="scrollport"> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> <div class="cell">lt;/div> </div></div>
How to hide horizontal scrollbar in firefox
Try this code in userChrome.css (you may have to adjust the margin values):
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
:-moz-any(#content,#appcontent) browser{
margin-right:-14px!important;
overflow-y:scroll;
margin-bottom:-14px!important;
overflow-x:scroll;
}
Related Topics
Stacking Order of Elements Affected by Opacity
Make Children Divs the Height of Tallest Child
How to Use the New Affix Plugin in Twitter's Bootstrap 2.1.0
CSS Two Div Width 50% in One Line with Line Break in File
Scrollbar Color Change in Firefox
Text Overflow Ellipsis: Avoid Word Break
How to Determine If CSS Has Been Loaded
CSS Specificity and Inheritance
Font Weight Turns Lighter on MAC/Safari
Is There Any Pros and Cons If I Use Always CSS Class Instead CSS Id for Everything
How to Use Apple's New San Francisco Font on a Webpage
Background Images: How to Fill Whole Div If Image Is Small and Vice Versa
Vertical Align Table-Cell Don't Work with Position Absolute
How to Make Sure Select Option Text Align in the Center in Ie