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.
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.
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 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>
Related Topics
Right Border of the Addthis Counter Missing with Twitter's Bootstrap 3
Breaking to a New Line with Inline-Block
Css3 Automatic Word Hyphenation Works on Firefox, Not on Internet Explorer and Chrome
Css- Multiple Background Image
Primefaces 5 Rotated Axis Tick Labels
How to Change Primefaces Submenu Default Icons
Scss - Get Container Width as Height
Css3 Slanted Div with Background Image, with Image Behind the Whole Thing
How to Compile an Existing Project Because Compass Can't Find It
How to Create Multiple Rows Using Semantic Markup in Bootstrap 3
CSS :After Input Placeholder Not Working in Mozilla
Colouring of Table Rows Alternatively
How to Remove Bullets from Numbered Toctree in Restructured Text