scrolltop 原生js_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赋值语句。

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

时间： 2015-04-16

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

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]如果你眼神能够 ...
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 翻译 ...
批量打开网站链接工具，兼容各大浏览器，用户体验良好
介绍一个批量打开网站链接的工具,兼容各大浏览器,在用户体验上升级,实现更加良好简单的使用,为各位有需求的大大提供了方便性在线工具地址:https://www.lmcjl.com/index/grab ...
html 兼容flv,怎么在html中插入.flv的视频，同时兼容各大浏览器呢？
满意答案和Lng2g3j 2016.04.22 采纳率:57% 等级:7 已帮助:4162人向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签, ...
关于@font-face兼容各大浏览器的问题
由于各大浏览器所支持的字体格式不一样,因此就要写兼容的代码字体可以去网上下载,可以用第三方软件生成不同格式的字体.(网上搜在线字体转换即可) 代码如下 @font-face {font-family ...
兼容低版本浏览器的一些方法
页面滚动的兼容方法 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
scrolltop 原生js_jQuery 中 scrollTop;原生的js怎么写
展开全部你好,我先需要明确e69da5e6ba9062616964757a686964616f31333337386538一下你是要问jQuery中scrollTop获取滚动条距顶端的距离,还是要使 ...

scrolltop 原生js_JS中完美兼容各大浏览器的scrolltop方法

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

最新文章

热门文章