6

我正在开发一个宽度为 760 像素的登录页面，并且需要一个包含 980 像素宽的内容（Flash 演示）的 iframe。所以我需要一个水平滚动条才能查看整个内容。但是，无论我添加什么作为滚动属性（例如 scrolling="auto/yes" 等），都不会发生任何事情——根本没有水平滚动条。

iframe中显示的页面在源码中有如下命令：

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    overflow-x: hidden;
}

据我了解，这就是我的 iframe 中没有水平滚动条的原因。有什么解决方法可以得到一个吗？

4

6 回答 6

3

You should wrap the iframe in a containing div, applying the fixed-width to the container.

-

HTML

<div class="container">
    <iframe></iframe>
</div>

-

CSS

.container {
    width: 980px;
    height: auto;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
于 2013-06-14T13:21:48.087 回答
1

尝试使用 javascript 更改 iFrames (body/child) 溢出。

就像是：

window.onload=function(){
 document.getElementById(one).setStyles({ 'overflow': 'auto' });
};

也许这个，不确定哪个会得到 iframe 的正文：

window.onload=function(){
    var frame = document.getElementById('one'),
    frameDoc = frame.contentDocument || frame.contentWindow.document;
    frameDoc.setStyles({ 'overflow': 'auto' });
};
于 2013-06-17T07:31:54.727 回答
0

Mention the width and height in to the iframe

and add overflow-y:hidden; overflow-x:scroll in the style of iframe

<iframe width="300" height="315" src="http://webstarts.com" frameborder="0" style="overflow-y:hidden; overflow-x:scroll;"></iframe>

here is the jsFiddle File

于 2013-06-14T13:24:24.690 回答
0

以下 Sergio 的回答是我在使用 jQuery 发现自己遇到同样问题时所做的：

  • 拿 iframe
  • 寻找身体
  • 应用不同的溢出属性

$('#iframe').contents().find('body').css('overflow', 'auto');

当然，一旦页面完全加载，所有这一切：

$(document).ready(function() {...});

现在它按我的预期显示滚动条

于 2013-12-10T18:02:15.710 回答
0

在“body”的 CSS 规则中，没有指定“width”。如果我理解正确，如果没有宽度，那么这样的内容就不会水平溢出任何东西。它不能比任何东西都“宽”，因为它没有“宽度”，所以它也不能溢出。

因此，我会尝试为 iFrame 内显示的文档正文提供宽度属性。

当然，这可能适用于某些浏览器，但不适用于其他浏览器。

于 2020-08-15T05:35:19.347 回答
0

您应该使用溢出-x：可见。如果您的内容托管在其他地方，由于跨域问题，您将无法更改。

想象一下，如果您拥有一个网站，而其他人想要 iFrame 您的网站并对其进行更改（如果您可以更改溢出，则可以从字面上更改任何样式，这将是一个巨大的安全漏洞）。这就是你不能的原因。

于 2018-06-12T14:58:20.193 回答