Iframe - 只能垂直滚动

Question

我有一个 iframe。

我需要一种跨浏览器的解决方案，以确保只显示垂直滚动条，而不管 iframe 内容的宽度如何。

我的解决方案已经依赖于 jQuery，因此，如果无法仅使用 CSS 实现此目标，我也可以接受 jQuery 解决方案。

我该怎么做？

- smartcaveman

Answer 1

你可以使用以下 CSS 代码来调整 iframe 或任何元素的滚动条：

iframe{ width:500px; height: 500px; overflow-x: hidden; overflow-y: scroll }

- HasanG

---

使用 overflow-x: allowed 可以使 iframe 和内容保持流动状态。好答案。 - Chris

在使用Chrome加载通过src属性引入的外部iFrame时，这对我不起作用。 - Rid Iculous

Answer 2

为了在 iframe 中仅显示垂直滚动条，您需要将 iframe 的宽度设置为大于 iframe 内页面的宽度。

<iframe src="#" width="--" height="250">
  <p>Your browser does not support iframes.</p>
</iframe>

或者尝试这个：

<style>
    #scroll-box {
        background:#e6e6e6;
        width:150px;
        height: 150px;
        padding:15px;
        overflow-y: scroll
    }
</style>

<iframe id="scroll-box">
    <h3>Lorem ipsum dolor sit amet</h3>     
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</iframe>   

- mgreen

---

优秀的解决方案，可以覆盖滚动属性并防止水平滚动条出现。但是当内容适合时，它会显示一个灰色的滚动条。 - Stuart Dobson

Answer 3

嵌套...

将<div>放入在<iframe>中加载的页面中，您可以控制滚动。

<iframe  scrolling="no" height="400" width="600" >
<div id="addcontent" style='width:600px;overflow-y:scroll;overflow-x:hidden;height:400px;position:relative;top:0px;left:0px;'>
</div>
</iframe>

- Gary Hayes

Answer 4

这对我来说有效（甚至在Safari上也是如此）：

<iframe src="http://url/file.html" frameborder="0" style="overflow-y:scroll !important; overflow-x:hidden !important; overflow:hidden;height:100%;width:100%;" scrolling="yes"></iframe>

或者你也可以这样做：

或者您也可以这样做：

CSS

iframe {
    overflow-y:scroll !important;
    overflow-x:hidden !important;
    overflow:hidden;
    height:100%; /* optional */
    width:100%; /* optional */
    border:none; /* optional */
}

HTML

<iframe src="http://url/file.html" scrolling="yes"></iframe>

*src (http://url/file.html)需要指向有效的URL和HTML文件。

- fabriek-huis