当前位置：文江博客话题详情

iFrame google-chrome scrollbar

Chrome 上没有 IFrame 滚动条

发布于 2024-11-11 14:44:58 字数 430 浏览 9 评论 0 原文

我正在使用 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 中没有看到任何滚动条。我已经搜索过这个问题并尝试了很多方法，但都没有解决我的问题。有人可以帮我解决这个问题吗？

原文

I am using an IFrame to make show some content from some other domain. The problem is that I can use a specified height and width (which I am using) and the content inside the IFrame cannot be accommodated completely in the IFrame. Hence, I need scrollbars.

I used the following html code -

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

This works fine in Firefox. But in Chrome I'm not getting any scrollbar in the IFrame. I have searched this problem and have tried many things all of which did not solve my problem. Can someone help me with this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一场信仰旅途 2024-11-18 14:44:58

在您的 iframe 内容中添加 inline:

<body style="overflow:auto;">

或在附加到 iframe 的 css 文件中添加

html, body {
   overflow:auto;
}

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

<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>

In your iframe content add inline:

<body style="overflow:auto;">

or in the css file attached to the iframe

html, body {
   overflow:auto;
}

and of course as recommended by Tom make sure you use scrolling="yes" and style="overflow:visible;" on the iframe:

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

If it still does not work then try to wrap the iframe like this:

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

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

</div>

回复收藏 0 原文

卸妝后依然美 2024-11-18 14:44:58

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

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

Instead of using the CSS style you could use the scrolling property of the iframe and set it to yes (i.e. always display scrollbars):

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

回复收藏 0 原文

肥爪爪 2024-11-18 14:44:58

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

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

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

如果仍然不起作用，请将 Chrome 更新到最新版本。 :)

Yap Tom is absolutely right you can use

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

and it should be work as i have tested.

If it still does not work then update Chrome to latest version. :)

回复收藏 0 原文

仅此而已 2024-11-18 14:44:58

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

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

To make this scrollable on all mobile devices (specially iPhone devices), you will need to add CSS to the div around the iframe:

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

回复收藏 0 原文

~没有更多了~