Html 带有溢出-x 内容的 iframe 的水平滚动条：隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17109338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal scroll bar for iframe with content that has overflow-x: hidden
提问by dtr
I am working on a landing page with width 760px and need to have an iframe with content (a flash demo) that is 980px wide. So I would need to have a horizontal scrollbar in order to view the entire content. However, no matter what I add as scrolling attributes (e.g. scrolling="auto/yes" etc), nothing happens - no horizontal scrollbar at all.
我正在处理一个宽度为 760 像素的登录页面，并且需要一个带有 980 像素宽度的内容（Flash 演示）的 iframe。所以我需要有一个水平滚动条才能查看整个内容。但是，无论我添加什么滚动属性（例如 scrolling="auto/yes" 等），都不会发生任何事情 - 根本没有水平滚动条。
The page displayed in the iframe has the following command in the source code:
iframe中显示的页面在源码中有如下命令：
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow-x: hidden;
}
As far as I understand it, this is the reason why there is no horizontal scrollbar in my iframe. Is there any workaround for that to get one?
据我了解，这就是我的 iframe 中没有水平滚动条的原因。有没有办法解决这个问题？
回答by blend
You should wrap the iframein a containing div, applying the fixed-width to the container.
您应该将 包装iframe在一个 contains 中div，将固定宽度应用于容器。
-
——
HTML
HTML
<div class="container">
<iframe></iframe>
</div>
-
——
CSS
CSS
.container {
width: 980px;
height: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
回答by Sergio
Try changing the iFrames (body/child) overflow with javascript.
尝试使用 javascript 更改 iFrames (body/child) 溢出。
Something like:
就像是：
window.onload=function(){
document.getElementById(one).setStyles({ 'overflow': 'auto' });
};
maybe this, not sure which will get the body of the iframes contant:
也许这个，不确定哪个会得到 iframes 的正文：
window.onload=function(){
var frame = document.getElementById('one'),
frameDoc = frame.contentDocument || frame.contentWindow.document;
frameDoc.setStyles({ 'overflow': 'auto' });
};
回答by spuas
Following Sergio's answer here is what I did when I found myself with the same problem, using jQuery:
按照塞尔吉奥的回答，当我发现自己遇到同样的问题时，我使用 jQuery 做了什么：
- Take the iframe
- Search for the body
- Apply a different overflow property
- 获取 iframe
- 寻找尸体
- 应用不同的溢出属性
$('#iframe').contents().find('body').css('overflow', 'auto');
$('#iframe').contents().find('body').css('overflow', 'auto');
All this once the page has been completely loaded, of course:
一旦页面完全加载，所有这一切，当然：
$(document).ready(function() {...});
$(document).ready(function() {...});
Now it displays the scrollbars as I expected
现在它按照我的预期显示滚动条
回答by gugateider
You should use overflow-x: visible. If your content is hosted elsewhere you will not be able to change due to cross domain issues.
您应该使用溢出-x：可见。如果您的内容托管在其他地方，由于跨域问题，您将无法更改。
Imagine if you own a website and someone else wants to iFrame your website and make changes to it ( if you could change the overflow, you could literally change any styling and that would be a huge security leak ). That is the reason why you can't.
想象一下，如果您拥有一个网站，而其他人想要 iFrame 您的网站并对其进行更改（如果您可以更改溢出，您实际上可以更改任何样式，这将是一个巨大的安全漏洞）。这就是你不能的原因。
回答by Roy Sonasish
Mention the width and height in to the iframe
在 iframe 中提及宽度和高度
and add overflow-y:hidden; overflow-x:scrollin the style of iframe
并添加overflow-y:hidden; overflow-x:scrolliframe 的样式
<iframe width="300" height="315" src="http://webstarts.com" frameborder="0" style="overflow-y:hidden; overflow-x:scroll;"></iframe>
here is the jsFiddle File
