JS中完美兼容各大浏览器的scrolltop方法

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赋值语句。

以上所述就是本文的全部内容了，希望大家能够喜欢。

JS中完美兼容各大浏览器的scrolltop方法相关推荐

scrolltop 原生js_JS中完美兼容各大浏览器的scrolltop方法
1.各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : ...
html5视频自动播放兼容谷歌浏览器,html5实现完美兼容各大浏览器的播放器
歌曲播放我们会发现他的兼容性不是很好,譬如IE上能播放的flash播放器,再firfox或者chrome上就不是很好的应用了,因为有插件的阻碍!HTML5的出现让这一切成为了可能,但是播放器虽然播放了 ...
php html5 播放器,html5实现完美兼容各大浏览器的播放器_html5教程技巧
歌词同步播放器-powered by widuu xiaowei [ar:测试用 ] [00:03.00]洋葱 [00:06.00]演唱:平安 [00:09.00] [00:11.38]如果你眼神能够 ...
问题之JS中传递数值过大或前置有零时
1.JS中传递数值多大数值会变 var number = 00161213313254545433 turnToDetail(number); function turnToD ...
绒毛动物探测器：通过TensorFlow.js中的迁移学习识别浏览器中的自定义对象
目录起点 MobileNet v1体系结构上的迁移学习修改模型训练新模式运行物体识别终点线下一步是什么?我们可以检测到脸部吗? 下载TensorFlowJS-Examples-master ...
批量打开网站链接工具，兼容各大浏览器，用户体验良好
介绍一个批量打开网站链接的工具,兼容各大浏览器,在用户体验上升级,实现更加良好简单的使用,为各位有需求的大大提供了方便性在线工具地址:https://www.lmcjl.com/index/grab ...
CSS完美兼容IE6/IE7/FF的通用方法～！！！
http://www.w3pop.com/learn/view/p/2/o/0/doc/css_hack_ie67_ff/ CSS完美兼容IE6/IE7/FF的通用方法作者:w3pop.com 翻译 ...
JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解
1. 总述在JS 中scrollWidth.scrollHeight.scrollLeft .scrollTop 属性在做一些复杂的交互效果中是非常常用的,因此在本博文中详细的介绍并给出实例. 以上 ...
js获取用户的操作系统和浏览器版本的方法
让IE支持placeholder属性通过window.location获得URL的信息 js获取用户的操作系统和浏览器版本的方法 2013-07-17 15:12:11| 分类: 工作 | ...

JS中完美兼容各大浏览器的scrolltop方法

JS中完美兼容各大浏览器的scrolltop方法相关推荐

最新文章

热门文章