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 相关文章推荐
Javascript图像处理思路及实现代码
Dec 25 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
全面解析bootstrap格子布局
May 22 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
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 和 XML: 使用expat函数(二)
2006/10/09 PHP
自动分页的不完整解决方案
2007/01/12 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
Python 自动补全(vim)
2014/11/30 Python
python动态进度条的实现代码
2019/07/03 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
python如何控制进程或者线程的个数
2020/10/16 Python
设计毕业生简历中的自我评价
2013/10/01 职场文书
村官学习十八大感想
2014/01/15 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
文案策划求职信
2014/03/18 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书