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中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
javascript简易画板开发
Apr 12 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
Javascript继承机制详解
May 30 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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
PHP4引用文件语句的对比
2006/10/09 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python实现优先级队列结构的方法详解
2016/06/02 Python
Golang与python线程详解及简单实例
2017/04/27 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
求职信的正确写法
2014/07/10 职场文书
先进工作者推荐材料
2014/12/23 职场文书
护士个人年度总结范文
2015/02/13 职场文书
学校教师培训工作总结
2015/10/14 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Python中使用ipython的详细教程
2021/06/22 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电