114

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

3

4 Answers 4

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>

10
  • 10
    I loaded your example on Chrome 15 and still see the scrollbars.
    – Dan
    Dec 18, 2011 at 15:39
  • 62
    Adding the scrolling="no" attribute to the iframe seems to remove scrollbars in Chrome.
    – Nick
    Feb 12, 2012 at 21:06
  • 2
    @Nick It doesn't remove it on chrome at least on my computer. img339.imageshack.us/img339/6685/chromelj.png
    – TtT23
    Feb 6, 2013 at 1:52
  • 1
    @l46kok your screenshot doesn't include scrolling="no" Feb 6, 2013 at 2:57
  • 3
    Note that the seemless attribute is currently not supported by any of the major browsers. caniuse.com/#feat=iframe-seamless
    – Liyali
    Oct 10, 2014 at 16:12
27

set scrolling="no" attribute in your iframe.

1
  • 1
    Although it enjoys wide support, per the MDN, the scrolling attribute is deprecated. May 1, 2021 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;
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.