各瀏覽器下 scrollTop的差異

2021-07-29 06:10:55 字數 1917 閱讀 3798

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)   被放置在 || 的中間位置。

因為當數字0undefine進行 或運算時,系統預設返回最後乙個值。即或運算中 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,或者說指定了 doctype 時,使用 document.documentelement。

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

在 ie 和 firefox 中均是如此。

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

var scrolltop = window.pageyoffset  //用於ff

|| document.documentelement.scrolltop

|| document.body.scrolltop

|| 0;

body是dom物件裡的body子節點,即 標籤;

documentelement 是整個節點樹的根節點root,即標籤;

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

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

各瀏覽器下 scrollTop的差異

1 各瀏覽器下 scrolltop的差異 ie6 7 8 對於沒有doctype宣告的頁面裡可以使用 document.body.scrolltop 來獲取 scrolltop高度 對於有doctype宣告的頁面則可以使用 document.documentelement.scrolltop saf...

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

window unbind scroll bind scroll function var scrolltop document.documentelement.scrolltop window.pageyoffset document.body.scrolltop if height scroll...

各瀏覽器CSS hack

區別 ie6與 ff background orange background blue 區別 ie6與 ie7 background green important background blue 區別 ie7與 ff background orange background green 區別 f...