Safari/Chrome (Webkit) - 无法隐藏 iframe 垂直滚动条

Posted 2023-02-21

技术标签:

【中文标题】Safari/Chrome (Webkit) - 无法隐藏 iframe 垂直滚动条【英文标题】：Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar 【发布时间】：2010-12-14 02:16:00 【问题描述】：

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

我会自动调整 iframe 的高度，这样框架就不需要任何滚动条来显示包含的网页。

在 Firefox 和 IE 上效果很好，因为我使用 <iframe ... scrolling="no"></iframe>，所以没有滚动条。但是，在 webkit 浏览器（Safari 和 Chrome）上，即使没有滚动条的页面有足够的空间（滚动条变灰），垂直滚动条仍然存在。

如何隐藏 webkit 浏览器的滚动条？

【问题讨论】：

后人注意：这是 webkit 浏览器中的一个错误，现已修复。这是错误报告：bugs.webkit.org/show_bug.cgi?id=29240 你为什么不接受！？ 【参考方案1】：

您能否将 IFRAME 的 overflow-y CSS 属性设置为 visible 或 hidden？

【讨论】：

直接为IFRAME设置overflow-y css属性为隐藏，或者为包含的网页的html/body标签似乎没有效果。我可以以某种方式覆盖此属性吗？ -1 overflow-y 不是标准的 CSS 属性；它只是 IE。感谢您让我认识乔希！【参考方案2】：

我假设您已经尝试过了，但是您是否在 iframe 上将滚动设置为 no？

<iframe scrolling="no">

【讨论】：

是的。不幸的是，我没有在我的帖子中逃脱那个标志，所以它没有显示。【参考方案3】：

试试这个...

iframe  overflow:hidden;

【讨论】：

【参考方案4】：

我刚刚遇到这个问题，发现解决方法是在iframe内的页面的HTML标签上设置overflow: hidden。

【讨论】：

感谢您的提示，蒂姆；它为我解决了这个问题。顺便说一句，似乎将 HTML 元素的样式设置为溢出：隐藏在样式标记内不起作用——您需要将其作为 HTML 标记的样式属性放入（即使这无效）。所以...这个： stuff 不是这个： stuff 在 Chrome/10.0.648.133 中，无论 overflow:hidden 是在 <html> 标记中、内联样式还是外部样式表中，它似乎都可以工作——尽管 Chrome 似乎有点缓存外部样式表过于激进。也许这个错误多年来的某个时候被修复了。如果我将overflow:hidden; 添加到body 标签而不是html，会有什么不同吗？【参考方案5】：

检查滚动是否真的来自 iframe，可能来自 HTML 或 BODY。

在 iframe 中滚动

<iframe scrolling="no">

在css中

iframe  overflow:hidden; 

or 

iframe  overflow-x:hidden; overflow-y:hidden

【讨论】：

【参考方案6】：

不要在 iframe 上使用滚动标签并将样式添加为样式=“溢出-x：隐藏；溢出-y：自动；” 这将删除水平滚动，它也应该反过来工作。

【讨论】：

【参考方案7】：

这有帮助吗？适用于 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>

【讨论】：

【参考方案8】：

我刚刚在我的博客上解决了这个问题，在样式标签后面加上了 scrolling="no"。

例如：

iframe src="asdf.html" style="overflow: hidden;" scrolling="no"

我将 style 属性留在了那里，因为它更合适并且在 Firefox 上运行良好。

【讨论】：

【参考方案9】：

将 iframe 的滚动属性设置为“no”应该解决此问题，但 webkit 中似乎存在错误：https://bugs.webkit.org/show_bug.cgi?id=29240

Tim 的解决方法 (Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar) 似乎可以解决问题 -- 只要您能够编辑 iframe 包含的文档...

【讨论】：

【参考方案10】：

像这样在 chrome put body 标签中隐藏 iframe 滚动

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

【讨论】：

【参考方案11】：

要摆脱灰色滚动条，请输入“溢出：隐藏；”在 iframe 中显示的页面的 body 标记上，例如<body style="overflow:hidden;"> 这在 Chrome 8.0.552.215 中对我来说效果很好，而且我在 iframe 本身上也有“溢出：隐藏”

【讨论】：

【参考方案12】：

在 Ubuntu 10.10 下使用 Chrome 8.0.552.224 beta 仍然显示此站点上的幽灵滚动条：http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling。我尝试了所有适用于所有浏览器但不适用于基于 WebKit 的浏览器的所有技巧。因此，该错误似乎没有完全修复。

【讨论】：

【参考方案13】：

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>

【讨论】：

这是一种蛮力方法，应该可以作为缺少功能或错误的解决方法:) 只需将 overflow:hidden 添加到 iframe 样式就足以让滚动设置在 Safari、chrome 和 IE 中为我工作【参考方案14】：

您可以隐藏滚动条并保持滚动功能（通过触摸板或滚轮，或在手机或平板电脑中触摸并拖动，方法是：

<style>
  iframe::-webkit-scrollbar   
    display: none;
    
</style>

显然，您可以将 iframe 更改为适合您设计的任何内容，并且您可以添加等效的 -mozilla- 属性以使其在 Firefox 中也能正常工作。

【讨论】：

没有版主能把这个回答成正确的吗？ @Hendrik 由打开问题的用户选择正确答案。谢谢@palako。请注意，如果您想保持垂直滚动可见，只需使用：iframe::-webkit-scrollbar:horizontal display: none; 仅隐藏水平。您可以将错误答案标记为“不是答案”——因为它不是。这个 CSS 似乎在最新的 Chrome 中不起作用，你必须在 iframe 本身中这样做。【参考方案15】：

document.body.addEventListener('touchmove', function(e) e.preventDefault(); );

这行得通，其他似乎都不起作用，包括用于 touchstart 的 e.preventDefault()。

【讨论】：

【参考方案16】：

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

【讨论】：

【参考方案17】：

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);

【讨论】：

以上是关于Safari/Chrome (Webkit) - 无法隐藏 iframe 垂直滚动条的主要内容，如果未能解决你的问题，请参考以下文章

Flexbox 包装 Safari 中第一行的最后一列

-moz-ms-webkit

是否有 -moz 等效于 ::-webkit-scrollbar？ [复制]

浏览器内核 Trident Gecko Presto Webkit

浏览器私有属性

HTML css 实现字体渐变颜色