iframe - 仅垂直滚动

Posted 2023-03-06

【中文标题】iframe - 仅垂直滚动

【英文标题】：Iframe - Vertical Scrolling Only

【发布时间】：2011-07-31 23:01:44

【问题描述】：

我有一个 iframe。

我需要一个跨浏览器解决方案来确保只有垂直滚动条可见，而不管 iframe 内容的宽度如何。

我的解决方案已经依赖于 jQuery，所以如果仅使用 CSS 无法做到这一点，我愿意接受 jQuery 解决方案。

我该怎么做？

【参考方案1】：

这对我有用（即使在 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 文件。

【参考方案2】：

嵌套...

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

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

【参考方案3】：

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

<iframe src="#"  >
  <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>   

【讨论】：

很好的解决方案来覆盖滚动属性并防止水平条。但是，当内容适合时，它会显示一个灰色的滚动条。

【参考方案4】：

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

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

【讨论】：

使用overflow-x：允许我将iframe和内容保持在所有流畅的内部。很好的答案。

这对我在 Chrome 中通过 src 属性加载外部 iFrame 不起作用