去掉iframe滚动条

最新推荐文章于 2025-06-07 18:55:01 发布

原创最新推荐文章于 2025-06-07 18:55:01 发布 · 1.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何消除iframe嵌套页面的滚动条问题。通过修改iframe的CSS样式以及在父页面中设置body属性，可以成功移除多余的滚动条。同时，文章提到了一种常见但可能受限于body高度的解决方案，指出其可能导致无法完整浏览页面的问题。

去掉iframe嵌套页面产生的多余的滚动条
原来的代码（产生多余的滚动条）

<iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100px" data-id="/webindex/titletop"
        th:src="@{/webindex/menubar}" ></iframe>
<iframe class="RuoYi_iframe" name="iframe1" width="100%" height="150px" data-id="/webindex/searchlist"
        th:src="@{/webindex/searchlist}" ></iframe>

多余滚动条效果如下：
在这里插入图片描述
**修改后的代码：

<iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100px" data-id="/webindex/titletop"
        th:src="@{/webindex/menubar}" frameborder="0" scrolling="no"  seamless></iframe>
<iframe class="RuoYi_iframe" name="iframe1" width="100%" height="250px" data-id="/webindex/searchlist"
        th:src="@{/webindex/searchlist}" frameborder="0"  scrolling="no" seamless></iframe>

frameborder="0" scrolling="no" 既可以去掉这两个嵌入页面的的滚动条；
** 修改后效果图
在这里插入图片描述
但是，笔者嵌入的页面比较多，在每个iframe 中是使用frameborder="0" scrolling="no" 居然还有一个多余的滚动条，经过多番尝试
发现使用在父页面中设置body属性（ps每个iframe 中还是使用frameborder="0" scrolling="no"），即可隐去多余的滚动条。

 body::-webkit-scrollbar {
        display:none
    }

** 防采坑笔记：**
笔者有看到网上还有一种解决方法——在父页面中设置body属性：

body{overflow-x：hidden；overflow-y：auto；}

但是这个方法容易受到body高度的限制，一旦页面的高度高于body 滚动条就不能拉倒页面底部，导致页面无法全部浏览。