Remove scrollbars Firefox desktop
The scrollbar behaviour is Fixed in Firefox 57
Firefox ignores padding when using overflow:scroll
in Firefox padding-bottom is ignored with overflow:auto or
overflow:scroll, see the documentationhttps://bugzilla.mozilla.org/show_bug.cgi?id=748518
still if you want to work around your example to achieve the desired result then see the fiddle: https://jsfiddle.net/nileshmahaja/4vuaf4o3/1/
Modified CSS
.container {
height: 200px;
padding: 50px 50px 0;
border: solid 1px red;
overflow-y:auto;
display:block;
}
ul{
padding:0 0 50px;
display:block
}
li {
padding: 0;
margin: 0;
}
firefox issue with the padding-right of the container box
Add an extra div that wraps your existing div and do float:left.
<body style="margin: 0; padding: 0; overflow-y: scroll;">
<div style="background-color: pink; width:100%;float:left;">
<div style="background: pink; padding: 32px; float:left;">
<img src="http://projects.quantize.com/P/reporter/blog/wp-content/themes/thesis/rotator/sample-1.jpg" style="width: 640px;" />
</div>
</div>
</body>
Edit: Removing display: block; as that's irrelevant when you have float.
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.
Related Topics
Phonegap + Windows Phone 8: Viewport Meta & Scaling Issue
Preventing Hover Event of a Div Triggering on Parent Div
Can Someone Explain to Me Why Clear:Both and Margin-Top Cannot Work in The Same Div
Webkit Border Radius and Transition Bug
Bootstrap Thumbnail Grid Not Starting a New Row Correctly
Orientation Media Query Not Working on iPad Mini
How to Manage My CSS as Modx Resources
Transform Scale Property Not Working in Chrome & Safari
Nth-Child to Alternate by 2 Rows
Setting a Cursor [With CSS] on an Image Map Area
CSS Stretched Background Image
How to Avoid Universal Rule CSS Asterisk(*)
Syntax Highlighting in Jekyll Using Redcarpet
Trouble (Vertically) Centering Text in Another Div with Relative % Sizing