CSS Safari/Chrome (Webkit) - 无法隐藏 iframe 垂直滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1691873/
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
Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar
提问by BrainCore
I have an iframeon www.example.com that points to support.example.com (which is a CNAME to a foreign domain).
我iframe在 www.example.com 上有一个指向 support.example.com （这是一个外国域的 CNAME）。
I automatically resize the height of my iframe so that the frame will not need any scrollbars to display the contained webpage.
我会自动调整 iframe 的高度，这样框架就不需要任何滚动条来显示包含的网页。
On Firefox and IE this works great, there is no scrollbar since I use <iframe ... scrolling="no"></iframe>. However, on webkit browsers (Safari and Chrome), the vertical scrollbar persists even when there is sufficient room for the page without the scrollbar (the scrollbar is grayed out).
在 Firefox 和 IE 上这很好用，因为我使用<iframe ... scrolling="no"></iframe>. 但是，在 webkit 浏览器（Safari 和 Chrome）上，即使没有滚动条的页面有足够的空间（滚动条呈灰色），垂直滚动条仍然存在。
How do I hide the scrollbar for webkit browsers?
如何隐藏 webkit 浏览器的滚动条？
回答by Tim
I just ran into this problem, and discovered that the fix was to set overflow: hiddenon the HTML tag of the page inside the iframe.
我刚遇到这个问题，发现修复方法是overflow: hidden在iframe.
回答by palako
You can hide the scrollbars and maintain the scrolling functionality (by touchpad or scroll wheel, or touch and drag in a mobile phone or tablet, by using:
您可以隐藏滚动条并保持滚动功能（通过触摸板或滚轮，或在手机或平板电脑中触摸和拖动，使用：
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
Obviously, you can change iframe to whatever fits your design, and you can add the equivalent -mozilla- property to get it work in firefox as well.
显然，您可以将 iframe 更改为适合您设计的任何内容，并且您可以添加等效的 -mozilla- 属性以使其在 Firefox 中也能正常工作。
回答by Labu
Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.
It's a bit of a hack, but I solved this issue by wrapping the <iframe>in a <div>, setting the <div>'s height, width & overflow:hidden, then setting the <iframe>'s width & height to actually overflow the wrapping <div>.
这有点麻烦，但我通过将<iframe>a包裹在 a 中解决了这个问题<div>，设置了<div>高度、宽度 & overflow:hidden，然后设置了<iframe>宽度和高度以实际溢出包装<div>。
<style>
div {height:100px;width:100px;overflow:hidden}
iframe {height:150px;width:150px;overflow:hidden}
</style>
<div>
<iframe src="foo.html" scrolling="no"></iframe>
</div>
Hope this helps.
希望这可以帮助。
回答by Shpigford
I'm assuming you've tried this, but have you set scrolling to no on the iframe?
我假设您已经尝试过这个，但是您是否在 iframe 上将滚动设置为 no？
<iframe scrolling="no">
回答by Simon Hymanson
To get rid of the greyed out scroll bars, put "overflow: hidden;" on the body tag of the page being displayed in the Iframe e.g. <body style="overflow:hidden;">This worked fine for me in Chrome 8.0.552.215 and I also had "overflow: hidden" on the Iframe itself
要摆脱灰色的滚动条，请输入“溢出：隐藏；” 在 Iframe 中显示的页面的 body 标记上，例如<body style="overflow:hidden;">这对我来说在 Chrome 8.0.552.215 中很好用，而且我在 Iframe 本身上也有“溢出：隐藏”
回答by tpeck
Does this help? Works on Chrome, IE, FF...
这有帮助吗？适用于 Chrome、IE、FF...
<style type="text/css">
html { overflow:hidden; }
#test { position:absolute; top:50; left:50; right:50; bottom:50; height:2000px; }
</style>
<body scroll="no">
<div id="test">content</div>
</body>
回答by Giles Bowkett
I just solved it on my blog with scrolling="no" after the style tag.
我刚刚在我的博客上用样式标签后的 scrolling="no" 解决了这个问题。
eg:
例如：
iframe src="asdf.html" style="overflow: hidden;" scrolling="no"
I left the style attribute in there because it's more proper and it worked fine on Firefox.
我将 style 属性留在那里，因为它更合适并且在 Firefox 上运行良好。
回答by JasonWyatt
Can you set the overflow-yCSS property for the IFRAME to either visibleor hidden?
您overflow-y可以将 IFRAME的CSS 属性设置为visible或hidden吗？
回答by harald
Using Chrome 8.0.552.224 beta under Ubuntu 10.10 is showing still the ghost scrollbars on this site: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling. I tried all tricks what works in all browsers but not in WebKit based browser. Therefore the bug seems not to be fixed completely.
在 Ubuntu 10.10 下使用 Chrome 8.0.552.224 beta 仍然显示此站点上的幽灵滚动条：http: //www.w3schools.com/TAGS/tryit.asp? filename=tryhtml_iframe_scrolling 。我尝试了在所有浏览器中都有效的所有技巧，但在基于 WebKit 的浏览器中无效。因此，该错误似乎并未完全修复。
回答by Razielblood
check if the scroll is realy from the iframe, maybe it's from the HTML or BODY.
检查滚动条是否真的来自 iframe，也许它来自 HTML 或 BODY。
For scroll in iframe
用于在 iframe 中滚动
<iframe scrolling="no">
In css
在 CSS 中
iframe { overflow:hidden; }
or
iframe { overflow-x:hidden; overflow-y:hidden}
