如何在iframe中添加滚动条

Question

我想在我的iframe中添加滚动条。以下是我的代码。

<iframe src="http://www.w3schools.com"  width="1349px" height="100%" scrolling="auto">

</iframe>

我正在使用Drupal 7编写这篇文章。问题是它不显示带有滚动条和边框的iframe。以前，我只是设置源而没有设置宽度、高度和滚动选项，它显示了带有滚动条的iframe，但添加了宽度和高度后，它就消失了。

谢谢。

- bsm

---

我已经修改了我的答案，使滚动条和边框出现。 - Leo T Abraham

Answer 1

scrolling="yes"和frameborder不再是HTML5的有效属性。它们在允许属性列表中找不到，参见：W3C:4.7.6.iframe元素或MDN:<iframe>。

请改用CSS：

iframe {
    overflow: scroll;
    width: 1349px;
    height: 100%;
    border: 1px solid black;
}

但实际上，如果需要的话，所有浏览器都会立即显示滚动条。

演示

试用后购买

- insertusernamehere

---

但是为什么这里的水平滚动条被禁用了呢？ - bsm

@bsm 看起来所有浏览器都有这个共同点（实际上我没有测试IE），如果不需要滚动条，它们就不会显示 <iframe> 的滚动条。 - insertusernamehere

好的。我正在Firefox中测试它。 - bsm

@vapcguy，实际上确实可以。使用演示链接进行测试。请注意，水平滚动条可能不可见，因为示例页面是响应式的，并且将适合iframe中。请尝试使用此链接。 - insertusernamehere

@SmurfEkko 很好的发现。W3C将当前文档移动到github.io。我已经相应地更新了链接，还添加了MDN链接。感谢您的反馈。 - insertusernamehere

Answer 2

你的代码中缺少了scrolling="yes"，请尝试以下代码

<iframe src="http://www.w3schools.com"  width="1349px" height="100%" scrolling="yes">
</iframe>

- Rajendra_Prasad

Answer 3

将 scrolling="auto" 改为 scrolling="yes" 并添加 frameborder="1" 尝试使用以下样式：

iframe {
   border: 1px solid #000 !important;
   overflow: scroll !important;
}

- Leo T Abraham

---

谢谢。我尝试了这个方法，但是水平滚动条仍然被禁用了，而且 iframe 盒子没有边框。 - bsm

我对我的答案进行了一些修改。 - Leo T Abraham

Answer 4

这与Firefox、IE或Edge无关。 我解决这个问题的方法是删除类的overflow: auto，并将其替换为当前情况下该表格的父级别如下：

class {
 overflow-y: scroll !important;
}

- Ctrl_Null

Answer 5

将 scrolling 属性更改为

scrolling="yes"

- S.V.

---

感谢您的快速回复。在进行此更改后，它显示禁用了水平滚动条，而且没有边框。 - bsm

@DrSatan1，请不要输入填充文本。如果您的答案太短，请尝试添加有关您建议更改的描述，这也是您应该做的。 - Patrick Evans