JavaScript中关于iframe滚动条的去除和保留
在开发中经常遇到去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条，大家基于js是怎么实现的呢？下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧！
iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？
一：去掉全部的滚动条
第一个方法： iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。
scrolling : auto -----在需要的时候滚动条出现
scrolling : yes ------始终显示滚动条
scrolling : no -------始终隐藏滚动条
当设置 scrolling : no 时，全部的滚动条就没有了。
第二个方法：我发现除了 scrolling 可以去掉全部的滚动条外，还有另一个方法，在嵌入的页面里设置 body{overflow：hidden}，这样也可以将滚动条去掉，而且这也是当我们只想去掉某一个滚动条所使用的属性。
二：去掉右边的滚动条且保留底下的滚动条
如果只想保留底下的滚动条，那么可以在嵌入的页面里设置 body{overflow-x：auto ; overflow-y：hidden；}
三：去掉底下的滚动条且保留右边的滚动条
在嵌入的页面里设置 body{overflow-x：hidden；overflow-y：auto；}
我们已经知道了这两个属性都可以设置滚动条的显示和隐藏，那么当两个同时设置时，会出现哪个效果呢？
通过检测，我发现当 scrolling = " auto " 或者 " yes " 时，如果设置了 body，那么就会使用body里的设置；当 scrolling = " no " 时，不管body设置了什么，都会使用 scrolling 的设置，即全部的滚动条都被去掉了。
以上所述是小编给大家介绍的JavaScript中关于iframe滚动条的去除和保留的全部叙述，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
- <iframe>也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。本文给大家介绍jQuery中iframe的操作(点击按钮新增窗口)，需要的朋友参考下吧...2016-04-22
javascript动态的改变IFrame的高度实现自动伸展
动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩 原理： 在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面)，添加JavaScript...2013-10-13- 这篇文章主要介绍了在vue中实现嵌套页面(iframe)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-31
JavaScript实现iframe自动高度调整和不同主域名跨域
这篇文章主要介绍了JavaScript实现iframe自动高度调整和不同主域名跨域,作者通过建立一个代理来同步高度调整,需要的朋友可以参考下...2016-03-01- 这篇文章主要介绍了jQuery取得iframe中元素的常用方法,结合实例形式详细分析了jQuery针对iframe中元素获取技巧及注意事项,需要的朋友可以参考下...2016-01-15
- 在开发中经常遇到去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条，大家基于js是怎么实现的呢？下面小编通过本文给大家详细介绍下，对js iframe滚动条相关知识感兴趣的朋友一起学习吧...2016-11-22
- 这篇文章主要介绍了微信jssdk在iframe页面失效问题的解决措施 的相关资料,需要的朋友可以参考下...2016-03-07
- 下面小编就为大家带来一篇DIV随滚动条滚动而滚动实现代码【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-04-16
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
这篇文章主要介绍了快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突问题，感兴趣的小伙伴们可以参考一下...2016-04-18php中IE7 iframe session丢失问题解决方案
本文章来给在家介绍在php中IE7 iframe session丢失问题解决方案，有碰到此类问题的同学可进入参考参考 假设采用iframe方式，很可能会遇到这样的问题。而且这个问题只...2016-11-25- 这篇文章主要介绍了JS模拟简易滚动条效果代码,可模拟出滚动条拖动显示的效果,涉及JavaScript鼠标事件的响应及页面元素运算的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下...2016-04-06
PHP关于IE下的iframe跨域导致session丢失问题解决方法
今天搞的一个登录页面，被别的网站用iframe嵌进去后，死活无法登录（只在IE中存在这种情况）。 很明显，session无法被保存。但是直接在地址栏打开那个登录页面，一切都正常啊。真是奇怪啊。 在网上搜索了一下。发现这个问题...2013-10-13- 项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关知识感兴趣的朋友一起学习吧...2016-01-14
python自动化测试selenium定位frame及iframe示例
这篇文章主要为大家介绍了python自动化测试selenium定位frame及iframe示例的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助...2021-11-13- 这篇文章主要介绍了jQuery检测滚动条是否到达底部的实现方法，文中介绍了两种检测滚动条到达底部的状况，感兴趣的小伙伴们可以参考一下...2015-12-17
- 这篇文章主要介绍了开发一个封装iframe的vue组件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下...2021-03-26
- 本文我们来讲讲另外一种网站注入攻击方式，PNG图像元数据中iFrame注入攻击，这个也是本人最近接触，以前没有注意过，或许也有很多站长不清楚，现在分享出来。 我们一直在努...2016-11-25
- 这篇文章主要介绍了JavaScript添加随滚动条滚动窗体的方法,涉及JavaScript事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下...2016-02-26
- 这篇文章主要向大家介绍了js父页面中使用子页面的方法，即js父页面使用iframe中的函数，感兴趣的朋友可以参考一下...2016-01-12
- 这篇文章主要介绍了jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)的关键代码，非常不错，代码简单易懂,需要的朋友可以参考下...2016-09-01