如何删除谷歌浏览器上iframe的水平滚动条 [英] how remove horizontal scroll bar for iframe on google chrome

问题描述

使用滚动=否的

并不是我想要的，因为我希望使用垂直滚动功能和水平滚动功能。仍然希望垂直滚动。

我试着把这个添加到css中。

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

但它仍然只显示chrome的水平滚动条。其余的浏览器都没问题。

任何帮助表示赞赏

解决方案

如果您有权访问iframe源页面，您可以将

  body {
 overflow-x：hidden; 
} 
  

。如果你不这样做，但至少页面来自同一个域名，我相信这样的父页面应该是这样的：

  #myiframe body {
 overflow-x：hidden; 
 
 
 
 
 
 $ b 
如果以上都不是真的 - 你可以模拟overflow-x：隐藏实际上隐藏了iframe容器内的水平滚动条。将Iframe放入较小高度的容器DIV中，例如： 
 
 
 < div id =myiframecontainer> 
< iframe id =myiframesrc =http://en.wikipedia.org/> 
< / div> 
 
 #myiframecontainer {
 width：600px; 
 height：400px; 
 overflow：hidden; 
} 
 
 #myiframe {
 width：100％; 
 height：420px; 
} 
  
由于iframe的高度大于div的高度，div的溢出被设置为隐藏 - iframe的水平滚动条将被隐藏。垂直仍然可以使用。 
 
 
演示： http://jsfiddle.net/5DPgf/  
 
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 
解决方案
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/

                        
这篇关于如何删除谷歌浏览器上iframe的水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！