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 相关文章推荐
Jquery插件之打造自定义的select标签
Nov 30 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
canvas的神奇用法
Feb 03 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
原生JS实现烟花效果
Mar 10 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 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
BBS(php & mysql)完整版(八)
2006/10/09 PHP
php木马攻击防御之道
2008/03/24 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
用javascript获取textarea中的光标位置
2008/05/06 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
DataFrame中去除指定列为空的行方法
2018/04/08 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
长安大学毕业生自我鉴定
2014/01/17 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
考试作弊万能检讨书
2014/10/19 职场文书