HTML iframe - 禁用滚动

Posted 2023-03-05

【中文标题】HTML iframe - 禁用滚动

【英文标题】：HTML iframe - disable scroll

【发布时间】：2013-03-07 20:05:05

【问题描述】：

我的网站中有以下 iframe：

<iframe src="<<URL>>"   sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

它有滚动条。 如何摆脱它们？

【问题讨论】：

Herman - 我认为scrolling="no" 应该可以工作。它对我有用。是在 html5 中吗？

@Yagnesh 我已经向您发布了我的 iframe 示例，但它无法正常工作。

我已尝试使用您的代码，并且无需滚动即可正常工作。请检查 iframe 是否在任何 div 下。

也许 iframe 内的 正在添加滚动条，而不是

【参考方案1】：

不幸的是，我认为仅使用 HTML 和 CSS 属性完全符合 HTML5 是不可能的。不过幸运的是，大多数浏览器仍然支持scrolling 属性（已从HTML5 specification 中删除）。

overflow 不是 HTML5 的解决方案，因为唯一错误支持 HTML5 的现代浏览器是 Firefox。

当前的解决方案是将两者结合起来：

<iframe src="" scrolling="no"></iframe>

iframe 
  overflow: hidden;

但是随着浏览器的更新，这可能会被淘汰。您可能想检查一下是否有 javascript 解决方案：http://www.christersvensson.com/html-tool/iframe.htm

编辑：我已经检查过，scrolling="no" 可以在 IE10、Chrome 25 和 Opera 12.12 中运行。

【讨论】：

HTML5 不支持

@LinusAn 这就是我回答的第一行所说的。问题是浏览器不能完全放弃它，因为它会破坏 HTML4 网站，所以 scrolling 属性仍然是一个可行的选项，尽管无效。

这是正确的，但在 Chrome 中，这会破坏 iframe 中元素上的 scrollIntoView。见code.google.com/p/chromium/issues/detail?id=137214

@Linus - 不幸的是，这不应该工作，并且它工作的任何浏览器都不一致：溢出不应应用于按钮、表单元素和 iframe 等替换元素。跨度>

@DaniSpringer 这个解决方案是为了删减内容。加载无法滚动的 iframe 不会自动调整整个子页面的大小以适应指定的 iframe 尺寸。

【参考方案2】：

我用这个 css 解决了同样的问题：

    pointer-events:none;

【讨论】：

它似乎阻止了物理滚动尝试，而不是视觉滚动条......

这将防止在 iframe 上触发任何鼠标事件，包括滚动。范围太广，无法成为强大的解决方案

我不得不使用它来防止在嵌入在 SVG 图像中的 foreignobject 中的 iframe 中滚动（只是 overflow: hidden 不起作用）

这不会停止通过鼠标滚轮滚动（在 Chromium 中）。此外，我相信 OP 想要真正隐藏滚动条；你应该把你的答案移到***.com/questions/2712034，因为我相信这部分地解决了这个问题。

谢谢，至少 iframe 滚动被禁用了。

【参考方案3】：

它似乎可以使用

html, body  overflow: hidden; 

内部 IFrame

编辑： 当然，这只有在您可以访问 iframe 的内容（我的情况下）时才有效

【讨论】：

不过，当使用 iframe 时，您通常无法访问其中的内容，因为它通常用于在另一个域中包含内容。

【参考方案4】：

将所有内容设置为：

#yourContent
 width:100%;
height:100%;  // in you csss

问题是 iframe 滚动是由内容而不是 iframe 本身设置的。

在内部使用 CSS 将内容设置为 100%，并在 HTML 中为 iframe 设置所需的内容

【参考方案5】：

我在当前的浏览器（Google Chrome 版本 60.0.3112.113（官方版本）（64 位））中尝试了 scrolling="no"，但没有成功。但是， scroll="no" 确实有效。可能值得一试

<iframe src="<<URL>>"   sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>

【讨论】：

实际上，深入研究一下，我认为原因只是我将 更改为比我尝试加载的实际 iFrame 更长。因此，使高度足够长以使滚动无意义实际上使滚动条对我来说消失了。我正在尝试显示整个页面，这可能与您尝试实现的不同。

这感觉更像是评论，而不是问题的实际答案。

感谢 JDV！我是 *** 的新手，所以我尝试发表评论，但没有足够的声誉点或其他名称。所以我同意，它应该是一个评论。感谢您的指导！

在获得必要的代表之前，您可以通过多种方式做出贡献。 ***.com/help/whats-reputation

【参考方案6】：

由于 "overflow: hidden;" 属性不能在 iFrame 本身上正常工作，但在应用到页面主体 inside 时似乎会给出结果iFrame，我试过这个：

iframe body  overflow:hidden; 

这令人惊讶地确实与 Firefox 一起使用，消除了那些烦人的滚动条。

但在 Safari 中，iframe 的右侧出现了一条奇怪的 2 像素宽的透明线，位于其内容和边框之间。奇怪。

【参考方案7】：

这对我有用：

<style>
*overflow:hidden!important;
htmloverflow:scroll!important;
</style>

注意：如果您需要在任何其他元素中使用滚动条，也可以在该元素中添加 css overflow:scroll!important;

【参考方案8】：

为您的 iframe 标签添加此样式..

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

【讨论】：

Overflow 不适用于 HTML5 iFrame。唯一错误地支持此功能的浏览器是 Firefox。

@JamesDonnelly 其实他并没有指定它是html5，这就是我们使用溢出的原因

【参考方案9】：

只需添加一个风格类似于以下任一选项的 iframe。我希望这能解决问题。

第一个选项：

<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" margin margin   allowfullscreen></iframe>

第二个选项：

<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" margin margin   allowfullscreen></iframe>

【参考方案10】：

对于这个框架：

    <iframe src="" name="" id=""></iframe>

我在我的 css 代码上试过这个：

    iframe#put the value of id here::-webkit-scrollbar 
         display: none;
    

【参考方案11】：

html5以下版本

iframe 
    overflow:hidden;

在html5中

<iframe seamless="seamless"  ....>


iframe[seamless]

   overflow: hidden;

但尚未正确支持

【讨论】：

根据this 和this，seamless 属性已从规范中删除。

【参考方案12】：

您可以使用以下 CSS 代码：

margin-top: -145px; 
margin-left: -80px;
margin-bottom: -650px;

为了限制 iframe 的视图。

【讨论】：

margin-down 是新属性还是您的意思是 margin-bottom？