Chrome浏览器中IFrame滚动条无法显示

Question

Chrome浏览器中IFrame滚动条无法显示

google-chromeiframescrollbar

10

我正在使用IFrame从其他域中显示一些内容。问题是，我可以使用指定的高度和宽度（我正在使用），但IFrame内部的内容无法完全适应IFrame。因此，我需要滚动条。

我使用了以下HTML代码 -

```html ```

请注意，scrolling属性设置为“auto”将根据需要添加滚动条。

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

在Firefox中，这个功能正常。但在Chrome中，IFrame没有出现任何滚动条。我已经搜索了这个问题，并尝试了许多方法，但都没有解决我的问题。有人可以帮助我吗？

- Siddharth

在Chrome 13.0.772.0 dev-m中运行良好！ - Pedro Correia

它在Chrome 11.0中无法工作。 - Siddharth

4个回答

4

你可以使用iframe的scrolling属性来代替CSS样式，将其设置为yes（即始终显示滚动条）：

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

- Tom van Enckevort

12

我发现了一个问题，我认为这是Chrome的一个bug - 在IFrame中显示的内容，其body标签被定义为<body style="overflow:hidden;">。如果您移除body中的style元素，那么IFrame将按预期呈现滚动条。在Firefox上，不会出现这样的问题。你认为这是Chrome的bug还是需要按这种方式编写HTML？ - Siddharth

我明白了。是的，这就是你看不到滚动条的原因。有没有办法让 iframe 变得足够大，以适应内容（即不需要滚动条）？ - Tom van Enckevort

你能控制iframe页面的HTML吗？如果可以，你可以添加一些JavaScript代码来检查是否正在使用Chrome并在iframe中显示页面，在这种情况下删除'overflow:hidden'样式。我想不出其他解决此问题的方法。这只发生在Chrome中还是在其他Webkit浏览器（如Safari）中也会发生？ - Tom van Enckevort

我同意这不是很整洁。但正如你所说，它在Chrome的后续版本中似乎已经修复了，所以它只会影响旧版本。 - Tom van Enckevort

Chrome在开发工具中也存在一个令人讨厌的bug。当设置了scrolling="no"，并且在开发工具中将其更改为"yes"或删除该属性时，您将看不到任何更改。但是，如果您从源文件中删除它并重新加载页面，则会看到滚动条。Chrome v61.0.3163.100 - fabpico

显示剩余4条评论

1

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

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

应该可以正常工作，我已经测试过了。

如果还是不行，请更新 Chrome 到最新版本。:)

- PHP Ferrari

无法使用最新版本的Chrome处理SVG内容... - Tw Bert

-1

为了使所有移动设备（特别是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>

- kalpesh khule

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RafaSashi · Accepted Answer

在您的iframe内容中添加内联：

<body style="overflow:auto;">

或者在附加到iframe的css文件中。

html, body {
   overflow:auto;
}

当然，正如Tom建议的那样，请确保在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>