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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 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
php针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
万能的php分页类
2017/07/06 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
基于CSS3实现立方体自转效果
2016/03/01 HTML / CSS
开学典礼感言
2014/02/16 职场文书
大学军训感言1500字
2014/03/09 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
毕业自我鉴定书
2014/03/24 职场文书
公司授权委托书样本
2014/09/15 职场文书
买房协议书范本
2014/10/23 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
会计实训总结范文
2015/08/03 职场文书
护士医德医风心得体会
2016/01/25 职场文书
高中生物教学反思
2016/02/20 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python