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


Posted in Javascript onNovember 17, 2016

在开发中经常遇到去掉全部的滚动条,去掉右边的滚动条且保留底下的滚动条,去掉底下的滚动条且保留右边的滚动条,大家基于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滚动条的去除和保留的全部叙述,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery select控制插件
Aug 17 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
jquery中键盘事件小结
Feb 24 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 #Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 #Javascript
jQuery 插件封装的方法
Nov 16 #Javascript
Node.js 数据加密传输浅析
Nov 16 #Javascript
JS中substring与substr的用法
Nov 16 #Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 #Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 #Javascript
You might like
php基础知识:控制结构
2006/12/13 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
php-app开发接口加密详解
2018/04/18 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
服务承诺书怎么写
2014/05/24 职场文书
酒后驾车标语
2014/06/30 职场文书
迟到检讨书
2015/01/26 职场文书
国庆庆典邀请函
2015/02/02 职场文书
企业安全生产检查制度
2015/08/06 职场文书
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers