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 相关文章推荐
js事件(Event)知识整理
Oct 11 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
Vue单文件组件开发实现过程详解
Jul 30 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
js 实现 input type="file" 文件上传示例代码
2013/08/07 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python使用py2exe打包程序介绍
2014/11/20 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
J2EE包括哪些技术
2016/11/25 面试题
大学专科生推荐信范文
2013/11/23 职场文书
一名女生的自荐信
2013/12/08 职场文书
老师自我鉴定范文
2013/12/25 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
骨干教师个人总结
2015/02/11 职场文书
护理专业自我评价
2015/03/11 职场文书
交通事故被告代理词
2015/05/23 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
Python中的tkinter库简单案例详解
2022/01/22 Python