Css Iframe-仅垂直滚动

我有一个iframe

我需要一个跨浏览器的解决方案，以确保只有垂直滚动条是可见的，无论iframe的内容的宽度

我的解决方案已经依赖于jQuery，因此，如果仅使用CSS无法实现这一点，我愿意使用jQuery解决方案

---

如何执行此操作？

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

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

您的浏览器不支持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>   

#滚动框{
背景：#e6；
宽度：150px；
高度：150像素；
填充：15px；
溢出y：滚动
}
Lorem ipsum dolor sit amet
我爱你，我爱你，我爱你

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

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

筑巢

将

放在

中加载的页面上，您可以控制滚动

<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>

这对我来说很有效（即使在safari上也是如此）：

HTML

---

*src（），需要指向有效的URL和HTML文件

覆盖滚动属性和防止水平条的绝佳解决方案。但是，当内容合适时，它确实会显示一个灰色的滚动条。使用overflow-x：允许我将iframe和内容保存在所有流体中。回答得好。这在通过src attrib加载外部iFrame的Chrome中不适用

<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>

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

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