如何在Google Chrome中移除iframe的水平滚动条

Question

我希望开启垂直滚动，并关闭水平滚动。使用 scrolling="no"不符合我的要求，因为我仍想开启垂直滚动。我尝试将以下内容添加到CSS中。

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

但是仅在Chrome浏览器中仍然显示水平滚动条。其他浏览器都没有问题。非常感谢任何帮助。

- alvinb

---

你是否可以访问iframe源或者页面是否来自同一个域名？ - Yuriy Galanter

我试过了，但是使用overflow-x:hidden只在Chrome浏览器上不起作用。它在其他所有浏览器上都有效。 - alvinb

实际上，如果您将样式 body {overflow-x:hidden;}（甚至是 html {overflow-x:hidden;}）放入显示在 iframe 中的页面中 - 它也适用于 Chrome。 - Yuriy Galanter

Answer 1

如果您可以访问iframe源页面，则可以放置

body {
    overflow-x:hidden;
}

如果您不能在该页面内完成操作，但至少这些页面来自同一个域名，我相信可以从父级页面类似以下的方法解决：

#myiframe body {
    overflow-x:hidden;
}

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

<div style="height: [小于Iframe高度]px; overflow-y: hidden; overflow-x: hidden;">
  <iframe src="[您的URL]" width="100%" height="100%" frameborder="0"></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的overflow属性被设置为hidden，所以iframe的水平滚动条将被隐藏。垂直滚动条仍然可以使用。

演示：http://jsfiddle.net/5DPgf/

- Yuriy Galanter

---

谢谢！这似乎是一个谷歌浏览器问题，尚未得到解决。但您关于将其放置在高度较低的 div 中的解决方案是一个临时修复。 - alvinb

选项3正是我所需的。思路非常周到！ - nrod