Question

我正在使用IFrame来展示来自其他某个域的一些内容。问题是我可以使用指定的高度和宽度（我正在使用），IFrame中的内容无法完全容纳在IFrame中。因此，我需要滚动条。

我使用了以下HTML代码 -

**<iframe style = "overflow-x:scroll; overflow-y:scroll;" src =       "http://shopsocial.ly/merchant/fanpage?merchant_name=cafepress"
     height = "400" width = "500">**

这在Firefox中运行良好。但在Chrome中，我没有在IFrame中获得任何滚动条。我已经搜索过这个问题并尝试过很多东西，但都没有解决我的问题。有人可以帮我这个吗？

Answer 1

您可以使用iframe的scrolling属性而不是使用CSS样式，并将其设置为yes（即始终显示滚动条）：

<iframe scrolling="yes" src="http://domain.com" height="400" width="500"></iframe>

Answer 2

在iframe内容中添加内联：

<body style="overflow:auto;">

或附加到iframe的css文件

html, body {
   overflow:auto;
}

当然按照汤姆的建议，确保您在iframe上使用scrolling="yes"和style="overflow:visible;"：

<iframe scrolling="yes" src="http://example.com" style="overflow:visible;"></iframe>

如果它仍然不起作用，那么尝试像这样包装iframe：

<div style="overflow:visible; height:400px;">

    <iframe scrolling="yes" src="http://example.com" style="overflow:visible; height:2000px;"></iframe>

</div>

Answer 3

Yap Tom绝对正确，您可以使用

<iframe style="overflow:visible; width:400px; height:400px;" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="yourfile.html"></iframe>

它应该像我测试的那样工作。

如果仍然无效，请将Chrome更新为最新版本。：）

Answer 4

要使其在所有移动设备（尤其是iPhone设备）上可滚动，您需要在iframe周围的div中添加CSS：

<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe scrolling="yes" src="http://example.com" height="400" width="500">Loading...</iframe>
</div>

IFrame滚动条不会出现在Chrome上

4 个答案: