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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 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
简单的页面缓冲技术
2006/10/09 PHP
php使用GeoIP库实例
2014/06/27 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
javascript import css实例代码
2008/07/18 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
巧用canvas
2017/01/21 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python类定义的讲解
2013/11/01 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python画图学习入门教程
2016/07/01 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python 二维数组90度旋转的方法
2019/01/28 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
电子商务应届生求职信
2013/11/16 职场文书
企业办公室岗位职责
2014/03/12 职场文书
难忘的一天教学反思
2014/04/30 职场文书
大专毕业生求职信
2014/07/05 职场文书
党员剖析材料范文
2014/12/18 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
2015年读书月活动总结
2015/03/26 职场文书
导游词之神仙居景区
2019/11/15 职场文书
opencv读取视频并保存图像的方法
2021/06/04 Python
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android