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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
jQuery构造函数init参数分析
May 13 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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
用PHP实现图象锐化代码
2007/06/14 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
基于js disabled="false"不起作用的解决办法
2013/06/26 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
js实现数组转换成json
2015/06/26 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
Python深入学习之上下文管理器
2014/08/31 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
python修改文件内容的3种方法详解
2019/11/15 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
GWT的应用有哪两种部署模式
2012/12/21 面试题
社区文艺活动方案
2014/08/19 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
小学家长通知书评语
2014/12/31 职场文书
开展警示教育活动总结
2015/05/09 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL