iframe关于滚动条的去除和保留

最新推荐文章于 2025-06-18 11:55:40 发布
最新推荐文章于 2025-06-18 11:55:40 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 大前端爬坑之路
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/kerryqpw/article/details/89814489
本文介绍了如何在iframe中控制滚动条的显示和隐藏，包括去除全部滚动条、仅保留垂直滚动条或水平滚动条的方法，涉及到iframe的scrolling属性和body的overflow属性的设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？

   一：去掉全部的滚动条

         第一个方法：   iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。

                             scrolling : auto -----在需要的时候滚动条出现

                             scrolling : yes ------始终显示滚动条

                             scrolling : n

了解本专栏 订阅专栏 解锁全文 超级会员免费看
iframe隐藏scrollbar并且还能够继续滚动
xo19882011的专栏
05-02 1696
frame 有个属性 scrolling，直接设置 scrolling=‘no’ 即可隐藏scrollbar。不过感觉有可能谁闲的设置过scrollbar的宽度怎么办呢，那就把这个值改成获取的吧。另外一个就是外边包一层比iframe窄的div，然后 overflow 设置成隐藏。查了好久的文档，太累了，目前暂时使用了直接把scrollbar隐藏的策略。以下是全部代码，基于vue+tailwindcss。目前感觉这个办法还算是效果比较好。
JS去除iframe滚动条的方法
10-24
主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下
iframe 隐藏滚动条
最新发布
念念小小的博客
06-18 241
最近写的项目，涉及到展示txt和pdf，于是选择使用 iframe 预览，但是有个滚动条显示在那里，看着好丑，想着隐藏掉。于是想了个办法，将iframe的宽度设置102%，超出父盒子一点点，然后父盒子设置overflow:hidden,完美解决！看网上说 设置 scrolling="no" ，发现 这个是禁用滚动条， 内容超出的话，没办法滚动查看了。翻了好多资料，没找到合适的。希望给大家提供下思路。
去除iframe内滚动条
sdmanooo的专栏
09-29 4056
iframe去滚动条应该有多种方式，在此简单总结两种： 1.在标签中添加scrolling属性，值为yes时，有滚动条，值为no时无滚动条。这种方法简单，但是页面估计不怎么好看。 2.在iframe链接的子页面的body中， 隐藏横向滚动条：  body{      overflow: scroll;      overflow-x: hidden;      overflow-y:
如何去掉iframe框架自带滚动条
热门推荐
weixin_40607363的博客
12-18 5万+
1、去掉底下的滚动条且保留右边的滚动条 在嵌入的页面里设置 body{overflow-x：hidden；overflow-y：auto；} 2、：去掉右边的滚动条且保留底下的滚动条        如果只想保留底下的滚动条，那么可以在嵌入的页面里设置 body{overflow-x：auto ; overflow-y：hidden；} 3、 去掉全部的滚动条 第一个方法：
iframe去掉滚动条
bansong2170的博客
09-02 270
<iframe name="leftframe" marginwidth=1 marginheight=1 src="leftmenu.asp" frameborder=no width="100%" scrolling="no" height=100%></iframe> 转载于:https://www.cnblogs.com/VirtualLive/arc...
JavaScript中关于iframe滚动条的去除和保留
11-27
下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧！ iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下...
去掉iframe滚动条（好使！）
weixin_45897915的博客
04-09 1万+
iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？ 一：去掉全部的滚动条 第一个方法： iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。 scrol...
网页iframe框架自动适应高度且去除滚动条
cfjbcg的博客
06-05 1354
③iframe的高度自适应不仅仅是指刚加载进来时，也有可能嵌入内容的高度会随点击变化（如：下拉菜单，左侧导航栏等）①iframe的高度始终等于嵌入页面内容的高度，而不是屏幕的高度。④页面可能同时嵌入多个iframe。②右侧不允许出现两个滚动条。
【我不熟悉的css】去掉iframe的滚动条
有一棵树的博客
11-15 2892
【我不熟悉的css】去掉iframe的滚动条
Iframe去除滚动条
ceocyo的专栏
04-16 1019
最近工作中遇到页面内嵌iframe滚动条去重的问题，由于项目中用到jq，就用jq解决 …….分享出来 。     03   外层html结构：  04    05 menu     06   07 08    09 #加入到iframe页面的js,可以加入到js文件，其他文件引用。  10     /**  11  * 完美解决iframe双滚动条显示 
去掉iframe滚动条
weixin_42758129的博客
11-03 1442
去掉iframe滚动条 <iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100px" data-id="/webindex/titletop" th:src="@{/webindex/menubar}" ></iframe> <iframe class="RuoYi_if...
iframe 出现两条滚动条,取消iframe滚动条
NiHao___的博客
11-06 512
height不要100vh 或者100%,获取屏幕高度并赋值给iframe。
最简单的方法去掉iframe滚动条
上班搞IT，下班搞ITF。
04-08 8138
该文也可以说是一个iframe自适应大小的折中解决办法。iframe出现滚动条的原因是，body里面的内容的高度大于了iframe的高度，所以会出现滚动条。解决办法：采用Jquery从iframe嵌套的页面中获取一个高度值，在iframe的父窗口中的onload事件中更新iframe的高度。具体实现代码：父页面：<!--function SetCwinH
iframe窗口去掉滚动条自适应浏览器大小
ResumeProject的博客
09-06 597
iframe窗口去掉滚动条自适应浏览器大小
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慕容屠苏

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值