How Remove Horizontal Scroll Bar for Iframe on Google Chrome

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/

Hide horizontal scrollbar on an iframe?

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>

Remove scrollbar from iframe

in your css:

iframe{
    overflow:hidden;
}

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 vertical scroll bar, keep horizontal scroll bar in iframe in Chrome

The answer is actually here:

Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar

Good luck!!

How to hide overflow scrollbar on Microsoft Chrome when there is no where to scroll?

Use the overflow-y property and set it to auto to enable the vertical scrollbar when it's needed.

Set overflow-x to hidden to disable horizontal scrolling altogether.

Dreaded iframe horizontal scroll bar can't be removed in IE?

scrolling="yes"  horizontalscrolling="no" verticalscrolling="yes"

Put that in your iFrame tag.

You don't need to mess around with trying to format this in CSS.

---

Related Topics