how remove horizontal scroll bar for iframe on google chrome

Question

I want to have vertical scrolling enable and horizontal scrolling off.

using scrolling="no" is not what i want since i still want the vertical scrolling.

I've tried adding this to css

  #myiframe{
    overflow-x:hidden;
    overflow-y:auto;
  }

but it still shows the horizontal-scroll bar for chrome only. the rest of the browsers are fine.

any help is appreciated

Answer 1

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/