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

css iframe safari webkit scrollbar

99,837

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

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

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

Solution 4

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

<iframe scrolling="no">

Solution 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

View more solutions

99,837

Author by

BrainCore

Updated on November 15, 2021

Comments

BrainCore over 2 years

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?
BrainCore over 14 years

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 over 14 years

yup. I didn't escape that flag in my post, unfortunately, so it didn't display.
Josh Stodola over 14 years

-1 overflow-y is not a standard CSS property; it is IE only.
JasonWyatt over 14 years

Thanks for letting me know Josh!
Mohammed Radwan almost 14 years

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: <html style="overflow: hidden;"> <head></head> <body>stuff</body> </html> Not this: <html> <head><style type="text/css"> html { overflow:hidden; } </style></head> <body>stuff</body> </html>
Kragen Javier Sitaker about 13 years

In Chrome/10.0.648.133 it seems to work whether the overflow:hidden is in the <html> 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 about 13 years

That's a brute-force approach that should work as a workaround to missing features or bugs :)
Hendrik Beenker over 11 years

Isn't there a moderator who can make this the correct answer?
quentin-starin over 11 years

@Hendrik it is up to the user that opened the question to choose a correct answer.
Mori about 10 years

Does it make a difference if I add overflow:hidden; to the body tag instead of html?
nuander over 9 years

just adding overflow:hidden to the iframe style was enough to get the scrolling setting working for me in Safari, chrome and IE
Joel Azevedo almost 9 years

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.
Ken Sharp over 8 years

You can flag the incorrect answer as "not an answer" - because it's not.
neatcoding over 6 years

This CSS seems to not work in newest Chrome, you have to do that in the iframe itself.
Mosh Feu over 5 years

@neatcoding, it's not working for me as well. Chrome 71 on mac.