Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar
CssIframeSafariWebkitScrollbarCss Problem Overview
I have an iframe on www.example.com that points to support.example.com (which is a CNAME to a foreign domain).
I automatically resize the height of my iframe so that the frame will not need any scrollbars to display the contained webpage.
On Firefox and IE this works great, there is no scrollbar since I use <iframe ... scrolling="no"></iframe>. However, on webkit browsers (Safari and Chrome), the vertical scrollbar persists even when there is sufficient room for the page without the scrollbar (the scrollbar is grayed out).
How do I hide the scrollbar for webkit browsers?
Css Solutions
Solution 1 - Css
I just ran into this problem, and discovered that the fix was to set overflow: hidden on the HTML tag of the page inside the iframe.
Solution 2 - Css
You can hide the scrollbars and maintain the scrolling functionality (by touchpad or scroll wheel, or touch and drag in a mobile phone or tablet, by using:
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
Obviously, you can change iframe to whatever fits your design, and you can add the equivalent -mozilla- property to get it work in firefox as well.
Solution 3 - Css
Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.
It's a bit of a hack, but I solved this issue by wrapping the <iframe> in a <div>, setting the <div>'s height, width & overflow:hidden, then setting the <iframe>'s width & height to actually overflow the wrapping <div>.
<style>
div {height:100px;width:100px;overflow:hidden}
iframe {height:150px;width:150px;overflow:hidden}
</style>
<div>
<iframe src="foo.html" scrolling="no"></iframe>
</div>
Solution 4 - Css
I'm assuming you've tried this, but have you set scrolling to no on the iframe?
<iframe scrolling="no">
Solution 5 - Css
To get rid of the greyed out scroll bars, put "overflow: hidden;" on the body tag of the page being displayed in the Iframe e.g. <body style="overflow:hidden;"> This worked fine for me in Chrome 8.0.552.215 and I also had "overflow: hidden" on the Iframe itself
Solution 6 - Css
Does this help? Works on Chrome, IE, FF...
<style type="text/css">
html { overflow:hidden; }
#test { position:absolute; top:50; left:50; right:50; bottom:50; height:2000px; }
</style>
<body scroll="no">
<div id="test">content</div>
</body>
Solution 7 - Css
Can you set the overflow-y CSS property for the IFRAME to either visible or hidden?
Solution 8 - Css
check if the scroll is realy from the iframe, maybe it's from the HTML or BODY.
For scroll in iframe
<iframe scrolling="no">
In css
iframe { overflow:hidden; }
or
iframe { overflow-x:hidden; overflow-y:hidden}
Solution 9 - Css
I just solved it on my blog with scrolling="no" after the style tag.
eg:
iframe src="asdf.html" style="overflow: hidden;" scrolling="no"
I left the style attribute in there because it's more proper and it worked fine on Firefox.
Solution 10 - Css
Using Chrome 8.0.552.224 beta under Ubuntu 10.10 is showing still the ghost scrollbars on this site: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling. I tried all tricks what works in all browsers but not in WebKit based browser. Therefore the bug seems not to be fixed completely.
Solution 11 - Css
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
this works, none of the others seemed to work including the e.preventDefault() for touchstart.
Solution 12 - Css
Try this...
iframe { overflow:hidden; }
Solution 13 - Css
Do not use scrolling tag at-all on the iframe and add the style as style="overflow-x:hidden;overflow-y:auto;" this will remove the horizontal scroll and it should work the other way round too.
Solution 14 - Css
Setting the iframe's scrolling attribute to "no" should fix this, but there appears to be a bug in webkit: https://bugs.webkit.org/show_bug.cgi?id=29240
Tim's work-around ( https://stackoverflow.com/questions/1691873/safari-chrome-webkit-cannot-hide-iframe-vertical-scrollbar/1848336#1848336 ) seems to fix the issue -- as long as you have the ability to edit the document contained by the iframe...
Solution 15 - Css
hide iframe scrolling in chrome put body tag like this
<body style="margin:0px; padding:0px; overflow:hidden;"></body>
Solution 16 - Css
<iframe> <body style="overflow-x: hidden"> </body> </iframe>
Solution 17 - Css
1.when you change iframe's scrolling yes or no, the iframe's scrollbar dosen't show immediately, you must refresh the iframe.
2.the html tap overflow in iframe colud influence the iframe's scrollbar
3.in the IE,you must clear iframe's src,then refresh iframe ,it will be work
4.so, show you the code
html
<iframe id="main_ifrm" class="main" frameborder="0" scrolling="no" src="new.html" ></iframe>
<button id="btn1">scrolling yes</button>
javascript
var ifrm = document.getElementById("main_ifrm");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
$(ifrm).prop("scrolling","no");
$(ifrm.contentWindow.document).find("html").css("overflow","hidden")
var src = $(ifrm).prop("src");
$(ifrm).prop("src","");
$(ifrm).prop("src",src);
}