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 操作文件 实现方法小结
Jul 02 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
理解 JavaScript Scoping & Hoisting(二)
Nov 18 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
php中的ini配置原理详解
2014/10/14 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
Vue渲染函数详解
2017/09/15 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python简单实例训练(21~30)
2017/11/15 Python
Python编程argparse入门浅析
2018/02/07 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
python ETL工具 pyetl
2020/06/07 Python
Python用SSH连接到网络设备
2021/02/18 Python
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
党员公开承诺事项
2014/03/25 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
解析Java异步之call future
2021/06/14 Java/Android