I need to hide the horizontal scollbar on an iframe using css, jquery or js.
-
1possible duplicate: Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar and others– Matt BallJan 31, 2011 at 22:19
-
iframe is not on the same domain as the parent page.– nkcmrJan 31, 2011 at 22:22
-
overflow-y: hidden; Not working in Google Chrome, Safari and Opera. Try it with jsfiddle.net/m5Btd/3– phangia2712Mar 13, 2012 at 4:16
4 Answers
I'd suggest doing this with a combination of
- CSS
overflow-y: hidden;
scrolling="no"
(for HTML4)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
-
62Adding the
scrolling="no"
attribute to the iframe seems to remove scrollbars in Chrome.– NickFeb 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– TtT23Feb 6, 2013 at 1:52
-
1
-
3Note that the seemless attribute is currently not supported by any of the major browsers. caniuse.com/#feat=iframe-seamless– LiyaliOct 10, 2014 at 16:12
set scrolling="no"
attribute in your iframe.
-
1Although it enjoys wide support, per the MDN, the
scrolling
attribute is deprecated. May 1, 2021 at 15:38
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:
This solution allow you to:
Keep you HTML5 valid as it does not need
scrolling="no"
attribute on theiframe
(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;
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/