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 相关文章推荐
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
JavaScript this关键字的深入详解
Jan 14 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
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python中字符串的格式化方法小结
2016/05/03 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
三十年同学聚会感言
2015/07/30 职场文书
公司财务管理制度
2015/08/04 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
python数字图像处理:图像的绘制
2022/06/28 Python