Hide horizontal scrollbar on an iframe?
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>
set scrolling="no"
attribute in your iframe.
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 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;