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 相关文章推荐
文本加密解密
Jun 23 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
javascript验证身份证号
Mar 03 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
Angular CLI 使用教程指南参考小结
Apr 10 Javascript
ElementUI之Message功能拓展详解
Oct 18 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的作用域
2008/03/27 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
JS中的防抖与节流及作用详解
2019/04/01 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
python opencv之SURF算法示例
2018/02/24 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
房展策划方案
2014/06/07 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
捐助倡议书
2015/01/19 职场文书
离婚案件被告代理词
2015/05/23 职场文书
信仰观后感
2015/06/03 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python