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跨浏览器显示的file上传控件
Oct 24 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 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上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP微信红包API接口
2015/12/05 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
php微信开发之百度天气预报
2016/11/18 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
Python入门篇之字典
2014/10/17 Python
python实现图片文件批量重命名
2020/03/23 Python
python实现猜单词小游戏
2020/05/22 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
矿泉水广告词
2014/03/20 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
出国留学单位推荐信
2015/03/26 职场文书
2015年司法所工作总结
2015/04/27 职场文书
企业法人任命书
2015/09/21 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
使用python创建股票的时间序列可视化分析
2022/03/03 Python