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学习笔记(十四) window对象使用介绍
Jun 20 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 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
javascript prototype原型操作笔记
2009/12/07 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python中的pprint折腾记
2015/01/21 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python实现批量监控网站
2016/09/09 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
200行python代码实现2048游戏
2019/07/17 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技