Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar

问题

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?

回答1:

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.

回答2:

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.

回答3:

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>

Hope this helps.

回答4:

I'm assuming you've tried this, but have you set scrolling to no on the iframe?

<iframe scrolling="no">

回答5:

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

回答6:

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>

回答7:

Can you set the overflow-y CSS property for the IFRAME to either visible or hidden?

回答8:

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}

回答9:

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.

回答10:

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.

回答11:

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

this works, none of the others seemed to work including the e.preventDefault() for touchstart.

回答12:

Try this...

iframe { overflow:hidden; }

回答13:

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.

-Jai

回答14:

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 ( Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar ) seems to fix the issue -- as long as you have the ability to edit the document contained by the iframe...

回答15:

hide iframe scrolling in chrome put body tag like this

<body style="margin:0px; padding:0px; overflow:hidden;"></body>

回答16:

<iframe> <body style="overflow-x: hidden"> </body> </iframe>

回答17:

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);
}

来源：https://stackoverflow.com/questions/1691873/safari-chrome-webkit-cannot-hide-iframe-vertical-scrollbar

标签

css

iframe

safari

webkit

scrollbar