Hide horizontal scrollbar on an iframe?

HtmlIframeScrollbarHide

Html Problem Overview

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

Html Solutions

Solution 1 - Html

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>

Solution 2 - Html

set scrolling="no" attribute in your iframe.

Solution 3 - Html

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;

Solution 4 - Html

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

Categories
Recommended Html Solutions
Recommended Iframe Solutions
Recommended Scrollbar Solutions
Recommended Hide Solutions

Previous Solution:

Why is "a" != "a" in C?

CString

Next Solution:

What is scope/named_scope in rails?

Ruby on-RailsNamed Scope

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionnkcmrView Question on Stackoverflow
Solution 1 - HtmlChase FlorellView Answer on Stackoverflow
Solution 2 - HtmlRahul DadhichView Answer on Stackoverflow
Solution 3 - HtmlGibboKView Answer on Stackoverflow
Solution 4 - HtmlRazan PaulView Answer on Stackoverflow