獲取scrollTop相容各瀏覽器的方法,以及繫結

$(window).unbind('scroll').bind('scroll', function () {

var scrolltop = document.documentelement.scrolltop || window.pageyoffset || document.body.scrolltop;

if ($('').height() - scrolltop <= document.documentelement.clientheight) {

1、各瀏覽器下 scrolltop的差異

ie6/7/8：

對於沒有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;

dtd相關說明：

頁面具有 dtd，或者說指定了 doctype 時，使用 document.documentelement。

頁面不具有 dtd，或者說沒有指定了 doctype，時，使用 document.body。

在 ie 和 firefox 中均是如此。

為了相容，不管有沒有 dtd，可以使用如下**：

var scrolltop = window.pageyoffset  //用於ff
|| document.documentelement.scrolltop 
|| document.body.scrolltop 
|| 0;

documentelement 和 body 相關說明：

body是dom物件裡的body子節點，即標籤；

documentelement 是整個節點樹的根節點root，即標籤；

dom把層次中的每乙個物件都稱之為節點，就是乙個層次結構，你可以理解為乙個樹形結構，就像我們的目錄一樣，乙個根目錄，根目錄下有子目錄，子目錄下還有子目錄。

以html超文字標記語言為例：整個文件的乙個根就是,在dom中可以使用document.documentelement來訪問它，它就是整個節點樹的根節點。而body是子節點，要訪問到body標籤，在指令碼中應該寫：document.body。

獲取scrollTop相容各瀏覽器的方法,以及繫結

scrollTop瀏覽器相容性獲取和設定方法

獲取不到scrollTop的問題

各瀏覽器下 scrollTop的差異

獲取scrollTop相容各瀏覽器的方法,以及繫結

scrollTop瀏覽器相容性獲取和設定方法

獲取不到scrollTop的問題

各瀏覽器下 scrollTop的差異

相關推薦