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日历实现代码
Sep 12 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
JavaScript模拟push
Mar 06 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
js实现点击烟花特效
Oct 14 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执行速度全攻略(上)
2006/10/09 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
Python格式化css文件的方法
2015/03/10 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python matlibplot绘制3D图形
2018/07/02 Python
Django csrf 验证问题的实现
2018/10/09 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
医学专业毕业生个人的求职信
2013/12/04 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
大学老师推荐信
2014/02/25 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
高三教师工作总结2015
2015/07/21 职场文书