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对象在后台转化java对象的问题探讨
Dec 20 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
javascript基础知识讲解
Jan 11 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
Vant picker 多级联动操作
Nov 02 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
yii操作session实例简介
2014/07/31 PHP
php事件驱动化设计详解
2016/11/10 PHP
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
Python代码实现KNN算法
2017/12/20 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
python 进程的几种创建方式详解
2019/08/29 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
介绍一下Make? 为什么使用make
2013/12/08 面试题
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
电子商务专业学生的学习自我评价
2013/10/27 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
Python如何配置环境变量详解
2021/05/18 Python