12月15, 2011

浏览器 窗口 scrollTop 的兼容性问题

今天做图片lazy load 需要得到页面的scrolltop值

当然如果有jquery 那么就直接
$(ele).scrollTop();

好了, 本文结束。。

不过 事实是没有这么舒服, 没有jquery..

好吧, 你不要告诉我去官网下一个。。

故事一般都是曲折的, 所以jquery 是不能 也不会有的。。

言归正传 这个值大家觉得烦 是因为有很多类似的

window.pageYOffset 被所有浏览器支持除了 IE 6, IE 7, IE 8, 不关doctype的事, 注IE9 开始支持此属性。

window.scrollY 被Firefox, Google Chrome , Safari支持 不关doctype的事, 注IE9 不支持此属性

在(quirk 模式)的时候 document.body.scrollTop 在 Internet Explorer, Firefox, Opera, Google Chrome Safari 返回正确的值。
在(quirk 模式)的时候 document.documentElement.scrollTop 永远是零

非quirk模式的时候 document.documentElement.scrollTop Internet Explorer, Firefox and Opera 返回正确的值 但是在 Google Chrome ,Safari 中永远是零

特整理一个表格如下

以上在win7环境下测试

可以看出是非常凌乱的

只在quirk模式下, body.scrollTop是被所有都支持的

所以这个表大家也不用 也没有必要去记, 只要记住一条

if(window.pageYOffset){//这一条滤去了大部分, 只留了IE678

}else if(document.documentElement.scrollTop ){//IE678 的非quirk模式

}else if(document.body.scrolltop){//IE678 的quirk模式

}

原则是看pageYOffset 然后看documentElement.scrollTop, 最后是document.body.scrollTop

当然 也可以直接scrollTop 而不使用pageYOffset

以下是MDN 提供的兼容性代码

scrolltop = (((t = document.documentElement) || (t = document.body.parentNode)) typeof t.scrollTop == ‘number’ ? t : document.body).scrollTop

本文链接:https://75team.com/post/浏览器-窗口-scrolltop-的兼容性问题.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。