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中处理字符串之link()方法的使用
Jun 08 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
从0开始学Vue
Oct 27 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
axios学习教程全攻略
Mar 26 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
js简易版购物车功能
Jun 17 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 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/10/09 PHP
PHP编码规范-php coding standard
2007/03/16 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
Python列表解析操作实例总结
2020/02/26 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
兼职学生的自我评价
2013/11/24 职场文书
预备党员转正思想汇报
2014/01/12 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
成语的广告词
2014/03/19 职场文书
司法助理专业自荐书
2014/06/13 职场文书
植物生产学专业求职信
2014/08/08 职场文书
你需要掌握的20个Python常用技巧
2022/02/28 Python