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

Question

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?

Note for posterity: this was a bug in webkit browsers that has since been fixed. Here's the bug report: https://bugs.webkit.org/show_bug.cgi?id=29240 — nerdherd, Jul 22 '13 at 19:50

score 66 · Answer 1 · edited Mar 20 '13 at 22:10

66

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.

edited Mar 20 '13 at 22:10

JSuar

21,056
4
39
83

answered Dec 04 '09 at 17:04

Tim

669
4
2

4

Thanks for this tip, Tim; it fixed the issue for me. By the way, it seems like styling the HTML element to be overflow:hidden inside of a style tag doesn't work -- you need to put it in as a style attribute for the HTML tag (even though that's not valid). So... This: stuff Not this: stuff – Rudi Aug 18 '10 at 18:03
In Chrome/10.0.648.133 it seems to work whether the overflow:hidden is in the `` tag, in an inline style, or even in an external stylesheet — although Chrome seems to be a little too aggressive about caching external stylesheets. Maybe this bug was fixed sometime over the years. – Kragen Javier Sitaker Apr 09 '11 at 17:06
Does it make a difference if I add `overflow:hidden;` to the `body` tag instead of `html`? – Mori Apr 29 '14 at 08:34

score 53 · Answer 2 · edited Feb 08 '12 at 23:19

53

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.

edited Feb 08 '12 at 23:19

Alix Axel

151,645
95
393
500

answered Jun 16 '11 at 16:44

palako

3,342
2
23
33

Isn't there a moderator who can make this the correct answer? – Hendrik Beenker Dec 05 '12 at 15:26
@Hendrik it is up to the user that opened the question to choose a correct answer. – quentin-starin Dec 07 '12 at 17:44
Thanks @palako. Just a note, if you want to maintain the vertical scroll visible, just use: iframe::-webkit-scrollbar:horizontal {display: none;} to only hide the horizontal. – Joel Azevedo Jun 16 '15 at 11:22
You can flag the incorrect answer as "not an answer" - because it's not. – Ken Sharp Feb 16 '16 at 22:20
2

This CSS seems to not work in newest Chrome, you have to do that in the iframe itself. – neatcoding Jan 29 '18 at 13:49
@neatcoding, it's not working for me as well. Chrome 71 on mac. – Mosh Feu Jan 23 '19 at 21:17

score 17 · Answer 3 · edited Nov 14 '21 at 13:31

17

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>

edited Nov 14 '21 at 13:31

Nimantha

6,405
6
28
69

answered Mar 25 '11 at 14:01

Labu

2,572
30
34

2

That's a brute-force approach that should work as a workaround to missing features or bugs :) – Kragen Javier Sitaker Apr 09 '11 at 17:07
just adding overflow:hidden to the iframe style was enough to get the scrolling setting working for me in Safari, chrome and IE – nuander Oct 24 '14 at 16:24

score 11 · Answer 4 · answered Nov 08 '09 at 05:30

11

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

<iframe scrolling="no">

answered Nov 08 '09 at 05:30

Shpigford

24,748
58
163
252

yup. I didn't escape that flag in my post, unfortunately, so it didn't display. – BrainCore Nov 09 '09 at 19:46

score 6 · Answer 5 · answered Dec 10 '10 at 16:15

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

tpeck · Answer 6 · 2010-01-15T13:21:59.560

3

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>

edited Jan 15 '10 at 13:21

answered Jan 15 '10 at 13:14

tpeck

31
2

score 2 · Answer 7 · edited Dec 14 '12 at 09:13

2

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

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

edited Dec 14 '12 at 09:13

akjoshi

15,374
13
103
121

answered Dec 14 '12 at 08:54

foopanda

21
1

score 2 · Answer 8 · answered Nov 07 '09 at 04:38

2

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

answered Nov 07 '09 at 04:38

JasonWyatt

5,275
1
31
39

Setting the overflow-y css property to hidden directly for the IFRAME, or for the html/body tags of the contained web page seems to have no effect. Could I be overriding this property somehow? – BrainCore Nov 07 '09 at 19:51
1

-1 `overflow-y` is not a standard CSS property; it is IE only. – Josh Stodola Nov 09 '09 at 19:51

score 2 · Answer 9 · answered Dec 21 '09 at 13:21

2

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}

answered Dec 21 '09 at 13:21

Razielblood

29
5

score 2 · Answer 10 · answered Jul 12 '10 at 21:46

2

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.

answered Jul 12 '10 at 21:46

Giles Bowkett

21
1

score 2 · Answer 11 · answered Dec 26 '10 at 09:51

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.

score 1 · Answer 12 · answered Nov 09 '09 at 19:51

1

Try this...

iframe { overflow:hidden; }

answered Nov 09 '09 at 19:51

Josh Stodola

81,538
47
180
227

score 1 · Answer 13 · edited Nov 14 '21 at 13:33

1

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.

edited Nov 14 '21 at 13:33

Nimantha

6,405
6
28
69

answered Dec 21 '09 at 14:06

Jai

11
1

score 1 · Answer 14 · edited May 23 '17 at 10:31

1

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...

edited May 23 '17 at 10:31

Community

1
1

answered Aug 18 '10 at 18:17

Rudi

541
3
11

score 1 · Answer 15 · edited Dec 10 '12 at 11:10

1

hide iframe scrolling in chrome put body tag like this

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

edited Dec 10 '12 at 11:10

Vishal Pawar

4,324
4
28
54

answered Oct 08 '10 at 11:33

Vaidehi

11
1

score 0 · Answer 16 · answered Jul 02 '14 at 16:31

0

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

answered Jul 02 '14 at 16:31

Teoman shipahi

47,454
15
134
158

score 0 · Answer 17 · answered Mar 10 '17 at 06:08

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

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

17 Answers17

Linked