CSS + FireFox: hiding scrollbar on iframe with scrolling=yes
Have you tried setting explicit values for width/height on either the iframe or parent container? Also, does your iFrame contain anything?
EDIT:
Try:
div {overflow:hidden;}
div iframe {border:0;overflow:hidden;}
in your actual page that contains the div.
Hiding scrollbar in old mozilla versions, preserving scroll
Use this CSS here:
@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;
}
Source: https://support.mozilla.org/en-US/questions/1216436#answer-1108340
Remove scrollbar from iframe
in your css:
iframe{
overflow:hidden;
}
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
Position Floated Elements Directly Under Each Other
Draw an Arrow Inside Table Cell Using CSS
Jquery UI Tooltip Custom Class on Page Load
How to Change the Font Size of the List (Not the Initial View)
Less CSS - Accessing Classes Further Up the Dom Tree from Within a Nested Class
Bootstrap 4 Center Navbar Brand with Collapse
How to Vertically Center Text in Its Bounding Box
Rotate Text in Bootstrap in Different Col Sizes
How to Stop Mobile Safari from Setting Fixed Positions to Absolute on Input Focus
How to Select Every Other Group of Three in CSS
How to Allow Flex-Items to Grow While Keeping the Same Size
Box-Shadow Only on Left and Right
React: How to Make an Input Only as Wide as the Amount of Text Provided
Set the Width of Children to Fill the Parent
CSS Opacity Affecting Sibling Image Opacity