114

I need to hide the horizontal scollbar on an iframe using css, jquery or js.

GibboK
  • 71,848
  • 143
  • 435
  • 658
nkcmr
  • 10,690
  • 25
  • 63
  • 84
  • 1
    possible duplicate: [Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar](http://stackoverflow.com/questions/1691873/safari-chrome-webkit-cannot-hide-iframe-vertical-scrollbar) and [others](http://stackoverflow.com/questions/2182707/how-to-hide-the-parent-vertical-scrollbar-after-an-iframe-is-loaded) – Matt Ball Jan 31 '11 at 22:19
  • iframe is not on the same domain as the parent page. – nkcmr Jan 31 '11 at 22:22
  • overflow-y: hidden; Not working in Google Chrome, Safari and Opera. Try it with http://jsfiddle.net/m5Btd/3/ – phangia2712 Mar 13 '12 at 04:16

4 Answers4

211

I'd suggest doing this with a combination of

  1. CSS overflow-y: hidden;
  2. scrolling="no" (for HTML4)
  3. and seamless="seamless" (for HTML5)*

* The seamless attribute has been removed from the standard, and no browsers support it.

.foo {
  width: 200px;
  height: 200px;
  overflow-y: hidden;
}
<iframe src="https://bing.com" 
        class="foo" 
        scrolling="no" >
</iframe>
Chase Florell
  • 46,378
  • 57
  • 186
  • 376
  • 10
    I loaded your example on Chrome 15 and still see the scrollbars. – Dan Dec 18 '11 at 15:39
  • 61
    Adding the `scrolling="no"` attribute to the iframe seems to remove scrollbars in Chrome. – Nick Feb 12 '12 at 21:06
  • 2
    @Nick It doesn't remove it on chrome at least on my computer. http://img339.imageshack.us/img339/6685/chromelj.png – TtT23 Feb 06 '13 at 01:52
  • 1
    @l46kok your screenshot doesn't include `scrolling="no"` – Chase Florell Feb 06 '13 at 02:57
  • Oh.. I just clicked the link in the answer and assumed that scrolling="no" was already there.. my bad for not checking – TtT23 Feb 06 '13 at 04:09
  • As a note: `scrolling="no"` is not supported in *HTML5* anymore. So the suggested CSS way or the attribute [`seamless`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-seamless) (if supported) are better solutions. – insertusernamehere Jul 02 '14 at 07:55
  • thanks @insertusernamehere, I've updated the answer to reflect this new tag. – Chase Florell Jul 03 '14 at 00:07
  • 3
    Note that the **seemless attribute is currently not supported by any of the major browsers**. http://caniuse.com/#feat=iframe-seamless – Liyali Oct 10 '14 at 16:12
  • The seamless attribute seems to was removed on January 2016: https://github.com/whatwg/html/issues/331#issuecomment-173923225 – sanzante Mar 09 '16 at 11:25
  • 1
    This doesn't work dynamically. The attributes must be there before iframe is loaded. If you dynamically set the attributes, the scrollbar won't disappear until you refresh the iframe.Any ideas? – Maciej Krawczyk Mar 19 '16 at 13:44
27

set scrolling="no" attribute in your iframe.

jou
  • 5,824
  • 3
  • 22
  • 24
Rahul Dadhich
  • 1,213
  • 19
  • 32
  • 1
    Although it enjoys wide support, per the [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe), the `scrolling` attribute is deprecated. – JamesQMurphy May 01 '21 at 15:38
15

If you are allowed to change the code of the document inside your iframe and that content is visible only using its parent window, simply add the following CSS in your iframe:

body {
    overflow:hidden;
}

Here a very simple example:

http://jsfiddle.net/u5gLoav9/

This solution allow you to:

  • Keep you HTML5 valid as it does not need scrolling="no" attribute on the iframe (this attribute in HTML5 has been deprecated).

  • Works on the majority of browsers using CSS overflow:hidden

  • No JS or jQuery necessary.

Notes:

To disallow scroll-bars horizontally, use this CSS instead:

overflow-x: hidden;
GibboK
  • 71,848
  • 143
  • 435
  • 658
2

This answer is only applicable for websites which use Bootstrap. The responsive embed feature of the Bootstrap takes care of the scrollbars.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>

jsfiddle: http://jsfiddle.net/00qggsjj/2/

http://getbootstrap.com/components/#responsive-embed

Razan Paul
  • 13,618
  • 3
  • 69
  • 61