html - 如何在谷歌浏览器上删除 iframe 的水平滚动条

Question

我想启用垂直滚动并关闭水平滚动。

使用 scrolling="no" 不是我想要的，因为我仍然想要垂直滚动。

我试过将它添加到 css

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

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

感谢任何帮助

Answer 1

如果您有权访问 iframe 源页面，您可以放置​​

body {
    overflow-x:hidden;
}

在那个页面里面。如果您不这样做，但至少页面来自同一域，我相信父页面中的类似内容应该可以工作:

#myiframe body {
    overflow-x:hidden;
}

如果以上都不成立 - 您可以通过实际隐藏 iframe 容器内的水平滚动条来模拟“overflow-x: hidden”。将 Iframe 放入高度较小的容器 DIV 中，例如:

<div id="myiframecontainer">
    <iframe id="myiframe" src="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/