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实现简单模态窗口,背景灰显
Nov 14 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
JavaScript中的lastIndexOf()方法使用详解
Jun 06 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
php-msf源码详解
2017/12/25 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
jQuery之网页换肤实现代码
2011/04/30 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
js实现窗口全屏示例详解
2019/09/17 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
技术总监岗位职责
2013/12/05 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
社团活动总结模板
2014/06/30 职场文书
公司员工活动策划方案
2014/08/20 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
2014年审计工作总结
2014/11/17 职场文书
单位委托函范文
2015/01/29 职场文书
英语辞职信范文
2015/02/28 职场文书
祝酒词范文
2015/08/12 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
Python利用FlashText算法实现替换字符串
2022/03/31 Python