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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
Cookie 注入是怎样产生的
Apr 08 Javascript
使用Post提交时须将空格转换成加号的解释
Jan 14 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 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
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
python中for语句简单遍历数据的方法
2015/05/07 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
大学生实习证明范本
2014/01/15 职场文书
英语生日邀请函
2014/01/23 职场文书
写自荐信三大法宝
2014/01/24 职场文书
挂科检讨书范文
2014/02/20 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
JavaScript函数柯里化
2021/11/07 Javascript