JS中完美兼容各大浏览器的scrolltop方法


Posted in Javascript onApril 17, 2015

1、各浏览器下 scrollTop的差异

IE6/7/8/9/10:

对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop  ;

Safari:

safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;

Firefox:

火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;

2、获取scrollTop值

完美的获取scrollTop 赋值短语 :

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。

仔细观察这句赋值,你发现啥了没??
没错, 就是 window.pageYOffset  (Safari)   被放置在 || 的中间位置。

因为当 数字0 与 undefine 进行 或运算时,系统默认返回最后一个值。即或运算中 0 == undefine ;

当页面滚动条刚好在最顶端,即scrollTop值为 0 时,IE 下 window.pageYOffset  (Safari) 返回为 undefine ,此时将 window.pageYOffset  (Safari) 放在或运算最后面时, scrollTop 返回 undefine ,  undefine 用在接下去的运算就会报错咯。

而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine.  可以安全使用..

所以说到头还是IE的问题咯. 杯具…

精神有点恍惚,不知道有没有表达清楚。
不过最后总结出来这句实验过OK,大家放心使用。

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

这是完美的获取scrollTop赋值语句。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
利用python分析access日志的方法
Oct 26 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
vue实现图书管理系统
Dec 29 Vue.js
jQuery检测输入的字符串包含的中英文的数量
Apr 17 #Javascript
JS获取图片高度宽度的方法分享
Apr 17 #Javascript
JS替换字符串中空格方法
Apr 17 #Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 #Javascript
jQuery实现自定义事件的方法
Apr 17 #Javascript
jQuery插件slides实现无缝轮播图特效
Apr 17 #Javascript
js实现touch移动触屏滑动事件
Apr 17 #Javascript
You might like
php 冒泡排序 交换排序法
2011/05/10 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
JavaScript 动态生成方法的例子
2009/07/22 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python代码中怎么换行
2020/06/17 Python
输入N,打印N*N矩阵
2012/02/20 面试题
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
国家助学金获奖感言
2014/01/31 职场文书
五好党支部事迹材料
2014/02/06 职场文书
材料会计岗位职责
2014/03/06 职场文书
暑假安全保证书
2015/02/28 职场文书
表扬信格式模板
2015/05/05 职场文书
入党介绍人考察意见
2015/06/01 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫