關於頁面scroolTop的獲取

2022-07-15 06:21:11 字數 2231 閱讀 5149

發現問題

獲取頁面滾動高度的時候:

當html頁面設定了dtd

document.body.scrooltop				 // 值總是為0;

document.documentelement.scrooltop //可以正常獲取

window.pageyoffset //可以正常獲取

#(並且後兩個值相等)

當頁面取消設定

document.body.scrooltop				 // 可以正常獲取;

document.documentelement.scrooltop //值總是為0

window.pageyoffset //可以正常獲取

#(並且1和3值相等)

當頁面dtd 設定

#上述三個獲取語句中,結果和取消設定顯示一樣

【以下內容**自網路】

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,或者說指定了 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。

vue獲渲染頁面後獲取內容高度

頁面使用了元件,渲染完之後獲取到的高度明顯不對,原來寫在mounted裡getheight 獲取不到。解決辦法 用 nexttick vue.nexttick callback,context 法一 在請求成功之後呼叫 this nexttick 我用了這種可以使用。法二 假如法一拿不到,就用wat...

關於頁面渲染

最近在學習公司的產品時發現在開啟報表設計頁面時,頁面的渲染和載入較慢.於是我想到了關於頁面渲染的優化.下面是關於如何優化頁面渲染的建議 一,寫出高效的css 首先弄清瀏覽器解析html 的過程 構建乙個dom樹,頁面要顯示的各元素都會建立到這個dom樹當中。每當乙個新元素加入到這個dom樹當中,瀏覽...

關於頁面ERR CONTENT LENGTH

1 問題的原因 1 nginx 反向 時載入大資料型別時許可權不夠 2 nginx 時proxy temp 資料夾下面的文字時資料未建立使用者組 3 nginx配置location 下面未載入proxy temp 2 解決辦法 1 配置nginx中的location載入資源大小 2 改變proxy ...