我在 www.example.com 上有一个 iframe 指向 support.example.com（它是指向外部域的 CNAME）。
我会自动调整 iframe 的高度，这样框架就不需要任何滚动条来显示包含的网页。
在 Firefox 和 IE 上效果很好，因为我使用 <iframe ... scrolling="no"></iframe>，所以没有滚动条。但是，在 webkit 浏览器（Safari 和 Chrome）上，即使没有滚动条的页面有足够的空间（滚动条变灰），垂直滚动条仍然存在。
如何隐藏 webkit 浏览器的滚动条？
【问题讨论】：
标签： css iframe safari webkit scrollbar
您能否将 IFRAME 的 overflow-y CSS 属性设置为 visible 或 hidden？
【讨论】：
overflow-y 不是标准的 CSS 属性；它只是 IE。
我假设您已经尝试过了，但是您是否在 iframe 上将滚动设置为 no？
<iframe scrolling="no">
【讨论】：
试试这个...
iframe { overflow:hidden; }
【讨论】：
我刚刚遇到这个问题，发现解决方法是在iframe内的页面的HTML标签上设置overflow: hidden。
【讨论】：
<html> 标记中、内联样式还是外部样式表中，它似乎都可以工作——尽管 Chrome 似乎有点缓存外部样式表过于激进。也许这个错误多年来的某个时候被修复了。
overflow:hidden; 添加到body 标签而不是html，会有什么不同吗？
检查滚动是否真的来自 iframe，可能来自 HTML 或 BODY。
在 iframe 中滚动
<iframe scrolling="no">
在css中
iframe { overflow:hidden; }
or
iframe { overflow-x:hidden; overflow-y:hidden}
【讨论】：
不要在 iframe 上使用滚动标签并将样式添加为 样式=“溢出-x：隐藏；溢出-y：自动；” 这将删除水平滚动，它也应该反过来工作。
【讨论】：
这有帮助吗？适用于 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>
【讨论】：
我刚刚在我的博客上解决了这个问题，在样式标签后面加上了 scrolling="no"。
例如：
iframe src="asdf.html" style="overflow: hidden;" scrolling="no"
我将 style 属性留在了那里，因为它更合适并且在 Firefox 上运行良好。
【讨论】：
将 iframe 的滚动属性设置为“no”应该解决此问题，但 webkit 中似乎存在错误：https://bugs.webkit.org/show_bug.cgi?id=29240
Tim 的解决方法 (Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar) 似乎可以解决问题 -- 只要您能够编辑 iframe 包含的文档...
【讨论】：
像这样在 chrome put body 标签中隐藏 iframe 滚动
<body style="margin:0px; padding:0px; overflow:hidden;"></body>
【讨论】：
要摆脱灰色滚动条，请输入“溢出：隐藏；”在 iframe 中显示的页面的 body 标记上，例如<body style="overflow:hidden;"> 这在 Chrome 8.0.552.215 中对我来说效果很好，而且我在 iframe 本身上也有“溢出：隐藏”
【讨论】：
在 Ubuntu 10.10 下使用 Chrome 8.0.552.224 beta 仍然显示此站点上的幽灵滚动条：http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling。我尝试了所有适用于所有浏览器但不适用于基于 WebKit 的浏览器的所有技巧。因此，该错误似乎没有完全修复。
【讨论】：
Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.
这有点小技巧，但我通过将<iframe> 包装在<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>
【讨论】：
您可以隐藏滚动条并保持滚动功能（通过触摸板或滚轮，或在手机或平板电脑中触摸并拖动，方法是：
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
显然，您可以将 iframe 更改为适合您设计的任何内容，并且您可以添加等效的 -mozilla- 属性以使其在 Firefox 中也能正常工作。
【讨论】：
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
这行得通，其他似乎都不起作用，包括用于 touchstart 的 e.preventDefault()。
【讨论】：
<iframe> <body style="overflow-x: hidden"> </body> </iframe>
【讨论】：
1.当你更改iframe的滚动是或否时，iframe的滚动条不会立即显示，你必须刷新iframe。
2.iframe colud中的html点击溢出影响iframe的滚动条
3.在IE中，你必须清除iframe的src，然后刷新iframe，才能工作
4.so，给你看代码
html
<iframe id="main_ifrm" class="main" frameborder="0" scrolling="no" src="new.html" ></iframe>
<button id="btn1">scrolling yes</button>
javascript
var ifrm = document.getElementById("main_ifrm");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
$(ifrm).prop("scrolling","no");
$(ifrm.contentWindow.document).find("html").css("overflow","hidden")
var src = $(ifrm).prop("src");
$(ifrm).prop("src","");
$(ifrm).prop("src",src);
}
【讨论】：