HTML5：Iframe 没有滚动？

Posted 2023-03-05

【中文标题】HTML5：Iframe 没有滚动？

【英文标题】：HTML5 : Iframe No scrolling?

【发布时间】：2013-08-30 11:18:04

【问题描述】：

当涉及到 html5 时，不再支持滚动属性 - 但我仍然需要删除滚动条 - 怎么做？

【参考方案1】：

在 HTML5 中没有滚动属性，因为“它的功能由 CSS 更好地处理”请参阅 http://www.w3.org/TR/html5-diff/ 了解其他更改。以及 CSS 解决方案：

CSS 解决方案：

HTML4 的 scrolling="no" 是 CSS 的 overflow: hidden 的别名，为此设置大小属性宽度/高度很重要：

iframe.noScrolling
  width: 250px; /*or any other size*/
  height: 300px; /*or any other size*/
  overflow: hidden;

将这个类添加到你的 iframe 中就完成了：

<iframe src="http://www.example.com/" class="noScrolling"></iframe>

！重要的提示 ！ Transitional 版本并同时使用scrolling="no" 和overflow:hidden :)

2020 年更新：以上情况仍然正确，iframe 的 oveflow 仍不受所有专业的支持

【讨论】：

为什么不iframe[scrolling='no'] overflow: hidden; ？

@mattcurtis 好吧，因为自 CSS2 起就支持属性选择器 - 这也是一个解决方案 :) - 但请记住 总有一天会删除 scrolling="no" - 因此类是更多视角:)

但是 iframe[scrolling = "no"] 永远不会被删除 ;)

如果可以，将html, body overflow: hidden 添加到 iframe 内文档的 CSS 似乎也可以。

overflow 对 2017 年 fx 和 chrome 中的 iframe 仍然没有影响