Hide Horizontal Scrollbar on an Iframe

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>

how remove horizontal scroll bar for iframe on google chrome

If you have access to iframe source page you can place

body {
    overflow-x:hidden;
}

inside of that page. If you don't, but at least pages are from the same domain, I believe something like this from the parent page should work:

#myiframe body {
    overflow-x:hidden;
}

If none of the above is true - you can simulate "overflow-x: hidden" by actually hiding the horizontal scrollbar inside of the iframe container. Place Iframe into a container DIV of a lesser height, e.g.:

<div id="myiframecontainer">
    <iframe id="myiframe" src="http://en.wikipedia.org"  />
</div>

#myiframecontainer {
    width:600px;
    height:400px;
    overflow:hidden; 
}

#myiframe {
    width:100%;
    height:420px; 
}

Since iframe height is bigger than div's height and div's overflow is set to hidden - horizontal scrollbar of the iframe will be hidden. Vertical still remains operational.

Demo: http://jsfiddle.net/5DPgf/

How to disable Horizontal Scroll Bar In iframe

I think I found the problem.

I changed the src of the <iframe> to http://docs.google.com/gview?url=http://www.google.com/&embedded=true (http://jsfiddle.net/U8JCj/2/).

By inspecting this in Developer Tools, it can be seen that it is not the <iframe> that has an overflow, but the inner <div id="content-pane"> which has overflow: auto. As this is internal to Google Docs, it is not a style you can change, and therefore there is no solution to this (while using Google Docs).

Remove scrollbar from iframe

in your css:

iframe{
    overflow:hidden;
}

Hide scrollbar in iframe, while still scrolling

scrolling="no"

and

display:none

Will stop the iFrame from scrolling. The only other solution is to "hide" the scrollbar via overlapping.

<div style="width: 400px; overflow: hidden">
  <iframe src="https://fr.wikipedia.org/wiki/Main_Page" width="407"height="480">
</div>

Note the 7 pixel difference between the parent div and the iframe, this effectively cuts off a portion of the iframe so that the scrollbar is hidden but you are still able to scroll.

Hide Horizontal Scrollbar on an Iframe