瀏覽器 窗口 scrollTop 的兼容性問題

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 中永遠是零

特整理一個表格以下

非quirk模式	IE6 7 8	IE9	firefox	opera	chrome	safari
scrollY	undefined	undefined	正確	正確	正確	正確
pageYOffset	undefined	正確	正確	正確	正確	正確
body.scrollTop	0	0	0	0	正確	正確
documentElement.scrollTop	正確	正確	正確	正確	0	0
quirk 模式	IE6 7 8	IE9	firefox	opera	chrome	safari
scrollY	undefined	undefined	正確	正確	正確	正確
pageYOffset	undefined	正確	正確	正確	正確	正確
body.scrollTop	正確	正確	正確	正確	正確	正確
documentElement.scrollTop	0	正確	0	0	0	0

以上在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