logo标签列表

Safari/Chrome（Webkit）-无法隐藏iframe垂直滚动条

cssiframesafariwebkitscrollbar
51

我在 www.example.com 上有一个指向 support.example.com 的 iframe（它是一个指向外部域名的 CNAME）。

我自动调整我的 iframe 的高度，以便该框架不需要任何滚动条来显示包含的网页。

在 Firefox 和 IE 中，这个方法非常好用，因为我使用了 <iframe ... scrolling="no"></iframe>。但是，在 Webkit 浏览器（Safari 和 Chrome）中，即使页面已经足够长而无需滚动条（滚动条被变灰），垂直滚动条仍然存在。

如何在 Webkit 浏览器中隐藏滚动条？

为了后人留存记录：这是Webkit浏览器中的一个错误，现已得到修复。以下是错误报告链接：https://bugs.webkit.org/show_bug.cgi?id=29240 - nerdherd
2
为什么你没有接受任何一个呢？ - Developerium
17个回答
2
1

试一下这个...

iframe { overflow:hidden; }
1

在Chrome中隐藏iframe滚动条，请像这样放置body标签

<body style="margin:0px; padding:0px; overflow:hidden;"></body>
1

不要在 iframe 上使用滚动标签，而是添加样式 style="overflow-x:hidden;overflow-y:auto;" 这将删除水平滚动条，垂直滚动条仍然可用。

1
0
<iframe> <body style="overflow-x: hidden"> </body> </iframe>
0

1. 当你更改 iframe 的滚动条属性为“是”或“否”时，iframe 的滚动条不会立即显示，你必须刷新 iframe。

2. 在 iframe 中，HTML 标签的溢出可能会影响 iframe 的滚动条。

3. 在 IE 中，你必须清除 iframe 的 src，然后刷新 iframe，它才能正常工作。

4. 因此，展示给你代码：

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);
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接