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：隐藏”。将 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/