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

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.

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.

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>

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

<iframe scrolling="no">

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

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

Related

Recent Posts