如何始终在 HTML5 的 iframe 中显示滚动条

Posted 2023-03-05

【中文标题】如何始终在 HTML5 的 iframe 中显示滚动条

【英文标题】：How to ALWAYS show scrollbar in iframe in HTML5

【发布时间】：2015-02-04 05:46:12

【问题描述】：

有没有办法在 html5 中的 iframe 上始终显示滚动条，即使内容没有溢出？ scrolling="yes" 属性在 HTML5 中不起作用。有没有使用 CSS 的方法？

【问题讨论】：

我不太确定，但我认为将 css overflow 属性设置为 scroll 就可以了

感谢您的回复，但在 iframe 标记上设置溢出以滚动不起作用。就像下面的回复者建议的那样，在嵌入文档上设置 body overflow: scroll 使其工作。

哦，是的，没错，那么我的方向是对的 :)

【参考方案1】：

就像一个附加组件，如果你只想让滚动条显示在一个方向而不是两个方向，你可以使用特定的 y 和 x css。

我想要一个垂直滚动条一直显示它的外观，而不是水平滚动条，因为宽度从未改变。

所以我用了：

overflow-y: 滚动；

另一个（在本例中为overflow-x）将默认为自动并且仅在需要时显示。

【参考方案2】：

scrolling="yes" 似乎只被一些早期的浏览器支持。从 IE 11 中旧版本的模拟来看，似乎 IE 8 放弃了支持：虽然这样的属性被识别，但值yes 不是——只有在内容不适合时才会显示滚动条。

这是浏览器实践的变化。它与 HTML5 无关。事实上，HTML5 将describes 属性scrolling="yes" 映射为CSS 设置overflow: scroll，这有点误导。

现代浏览器实现iframe，以便在需要访问所有内容时出现滚动条，否则不存在。使用scrolling=no 或overflow: hidden，您可以防止滚动条出现，但如果内容合适（没有溢出）则不显示。

要让滚动条出现，您需要在 embedded 文档中设置它们，例如通过在其中使用body overflow: scroll 。那么iframe 元素说什么并不重要。当内容实际适合时，滚动条将是被动的（浅灰色），但它们会占据空间，并且随着内容的扩展而变得不适合，它们会变为活动滚动条。在下面的示例中，我嵌入了一个设置 body overflow: scroll 并具有可编辑的 body 元素的页面，以便您可以添加线条并查看条形的变化：

<iframe src="http://www.cs.tut.fi/~jkorpela/hello.html"></iframe>

【讨论】：

效果很好。非常感谢您的详细回复。

不能感谢你！你让我开心。