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

【问题标题】：How to ALWAYS show scrollbar in iframe in HTML5如何始终在 HTML5 的 iframe 中显示滚动条
【发布时间】：2015-02-04 05:46:12
【问题描述】：

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

【问题讨论】：

我不太确定，但我认为将 css overflow 属性设置为 scroll 就可以了
感谢您的回复，但在 iframe 标记上设置溢出以滚动不起作用。就像下面的回复者建议的那样，在嵌入文档上设置 body { overflow: scroll } 使其工作。
哦，是的，没错，那么我的方向是对的 :)

标签： css html iframe 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 元素的页面，以便您可以添加线条并查看条形的变化：

&lt;iframe src="http://www.cs.tut.fi/~jkorpela/hello.html"&gt;&lt;/iframe&gt;

【讨论】：

效果很好。非常感谢您的详细回复。
不能感谢你！你让我开心。