具有overflow-x: hidden的内容的iframe的水平滚动条

Question

我正在制作一个宽度为760像素的落地页，并需要一个宽度为980像素的内容（flash演示）。因此，我需要一个水平滚动条才能查看整个内容。然而，无论我添加什么滚动属性（例如scrolling="auto/yes"等），都没有任何反应-根本没有水平滚动条。

在iframe中显示的页面在源代码中具有以下命令：

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

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

- dtr

---

你能分享更多的代码或者一个实时链接吗？ - Sergio

这是我在HTML中的代码（目前无法显示iframe的源代码）：

CSS:div.one {width: 760px; float: left; vertical-align: bottom; } - dtr

你对iFrames的内容有控制权吗？ - Sergio

不好意思，很遗憾不能。 - dtr

通过JavaScript添加了一个新的答案。 - Sergio

Answer 1

您需要将iframe放在一个容器div中，对容器应用固定宽度。

-

HTML

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

-

CSS

.container {
    width: 980px;
    height: auto;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

- blend

---

iframe已经在具有正确固定宽度的div中了。仍然没有任何结果... - dtr

@dtr 因为您可能没有设置容器的正确溢出属性。对我来说它很好用。 - technophyle

Answer 2

尝试使用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' });
};

- Sergio

---

您将在此代码中遇到跨域问题。您不被允许在跨域iFrames上更改样式。 - gugateider

@gugateider 所有答案都会有CORS限制。但我认为这不是问题的范围。 - Sergio

Answer 3

在 iframe 中提及宽度和高度

并在 iframe 的样式中添加 overflow-y:hidden; overflow-x:scroll

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

这里是jsFiddle文件

- Roy Sonasish

---

尝试过了，但没有帮助。看起来/感觉好像水平滚动条只是被源代码“压制”了。垂直滚动条对所有滚动命令都有反应。 - dtr

Answer 4

以下是我在遇到同样问题时所采取的方法，使用jQuery：

• 获取iframe
• 查找body元素
• 应用不同的overflow属性

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

当然，所有这些都要在页面完全加载后进行：

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

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

- spuas

Answer 5

你应该使用 overflow-x: visible。

如果你的内容托管在其他地方，由于跨域问题，你将无法进行更改。

想象一下，如果你拥有一个网站，而其他人想要 iFrame 你的网站并对其进行更改（如果你可以更改 overflow，那么你实际上可以更改任何样式，这将是一个巨大的安全漏洞）。这就是为什么你不能这样做的原因。

- gugateider

Answer 6

在你的CSS规则中，"body"没有指定"width"。如果我理解正确的话，如果没有宽度，则此类内容水平方向上无法溢出。它不能比任何东西更"宽"，因为它没有"width"，所以它也无法溢出。

所以我会尝试给iFrame中显示的文档的body设置width属性。

当然，这在某些浏览器中可能有效，但在其他浏览器中可能无效。

- Panu Logic