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

Question

在HTML5中，是否有一种方法可以始终显示iframe中的滚动条，即使内容不会溢出？使用scrolling="yes"属性在HTML5中不起作用。是否可以使用CSS来实现？

- nparabz

---

我不太确定，但我认为将CSS的overflow属性设置为scroll就可以了。 - redelschaap

谢谢您的回复，但在 iframe 标签上设置 overflow 为 scroll 不起作用。就像下面的回复者建议的那样，在嵌入文档上设置 body { overflow: scroll } 可以使其工作。 - nparabz

哦，没错，那我当时就走对了 :) - redelschaap

Answer 1

似乎只有早期的浏览器支持 scrolling="yes"。从 IE 11 模拟旧版本来看，IE 8 放弃了对此的支持：尽管识别该属性，但不识别值 yes ——只有当内容溢出时才会显示滚动条。

这是浏览器实践的一种变化。它与 HTML5 没有任何关系。事实上，HTML5 将 属性 scrolling="yes" 映射到 CSS 设置 overflow: scroll ，这可能有点误导。

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

要让滚动条出现，需要使“嵌入”文档设置它们，例如通过在其中使用 body { overflow: scroll }。然后无论 iframe 元素说什么都无所谓。当内容实际适合时，滚动条将是被动的（浅灰色），但它们会占用空间，并在内容扩展以使其不适合时变为活动滚动条。在下面的例子中，我嵌入了一个页面，该页面设置了 body { overflow: scroll } 并具有可编辑的 body 元素，因此您可以添加行并查看条的变化：

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

- Jukka K. Korpela

---

那个完美地运行了。非常感谢您详细的回复。 - nparabz

无法感谢你这个！你让我的一天变得美好。 - majick

Answer 2

作为附加信息，如果你只想在一个方向上显示滚动条而不是两个方向，可以使用特定的y和x css。

我想要一个垂直滚动条始终显示出来，仅仅是为了好看，但是水平滚动条没有必要，因为宽度从未改变。

所以我使用了：

{overflow-y: scroll;}

另一个（在这种情况下是overflow-x）将默认为auto，只有在需要时才会显示。

- Andy Spencer