js判斷滾動條是否已到頁面最底部或頂部例項

2022-11-24 23:01:23 字數 3358 閱讀 4869

原文

當可視區域小於頁面的實際高度時,判定為出現滾動條,即:

複製** **如下:

if (document.documentelement.clientheight < document.documentelement.offsetheight) scroll = true;

要使用 document.documentelement ,必須在頁面頭部加入宣告:

複製** **如下:

其實,這段**是不起作用的,因為他沒考慮到一個問題,就是瀏覽器的邊框,當我們在獲取頁面的offsetheight高度時是包括了瀏覽器的邊框的,瀏覽器的邊框是2個畫素,所以這時無論在任何情況下clientheight 始終是小於offsetheight的,這就使得即使沒有滾動條它也為true,因此我們要修正這個錯誤,**應該這樣改,在offsetheight上減去4個畫素,即:

複製** **如下:

if (document.documentelement.clientheight < document.documentelement.offsetheight-4)

還有,這裡要搞清楚,上面這**是判斷橫向滾動條的,我們一般要判斷的是縱向滾動,**如下:

複製** **如下:

if (document.documentelement.clientwidth < document.documentelement.offsetwidth-4)

判斷滾動條是否已拉到頁面最底部,可以用如下**

複製** **如下:

window.onscroll = function

() else

if(marginbot<=0)

}

示例2在網上找的。還挺相容瀏覽器的。奇怪的是我在文件裡面沒找到相關資訊。**貼出來吧。

複製** **如下:

/*

*******************

* 取視窗滾動條高度

*****************

*/function

getscrolltop()

else

if(document.body)

return

scrolltop;}/*

*******************

* 取視窗可視範圍的高度

******************

*/function

getclientheight()

else

return

clientheight;}/*

*******************

* 取文件內容實際高度

******************

*/function

getscrollheight()

function

test()

else

}

補充:dtd已宣告:

iedocument.documentelement.scrollheight  瀏覽器所有內容高度 ,document.body.scrollheight  瀏覽器所有內容高度

document.documentelement.scrolltop  瀏覽器滾動部分高度,document.body.scrolltop 始終為0

document.documentelement.clientheight  瀏覽器可視部分高度,document.body.clientheight  瀏覽器所有內容高度

ffdocument.documentelement.scrollheight  瀏覽器所有內容高度 ,document.body.scrollheight  瀏覽器所有內容高度

document.documentelement.scrolltop  瀏覽器滾動部分高度,document.body.scrolltop 始終為0

document.documentelement.clientheight 瀏覽器可視部分高度,document.body.clientheight  瀏覽器所有內容高度

chrome

document.documentelement.scrollheight  瀏覽器所有內容高度, document.body.scrollheight  瀏覽器所有內容高度

document.documentelement.scrolltop 始終為0,document.body.scrolltop  瀏覽器滾動部分高度

document.documentelement.clientheight  瀏覽器可視部分高度,document.body.clientheight  瀏覽器所有內容高度

dtd未宣告:

iedocument.documentelement.scrollheight  瀏覽器可視部分高度,document.body.scrollheight  瀏覽器所有內容高度

document.documentelement.scrolltop 始終為0,document.body.scrolltop  瀏覽器滾動部分高度

document.documentelement.clientheight 始終為0,document.body.clientheight  瀏覽器可視部分高度

ffdocument.documentelement.scrollheight  瀏覽器可視部分高度, document.body.scrollheight 瀏覽器所有內容高度

document.documentelement.scrolltop 始終為0,document.body.scrolltop 瀏覽器滾動部分高度

document.documentelement.clientheight 瀏覽器所有內容高度,document.body.clientheight 瀏覽器可視部分高度

chrome

document.documentelement.scrollheight 瀏覽器可視部分高度,document.body.scrollheight 瀏覽器所有內容高度

document.documentelement.scrolltop 始終為0,document.body.scrolltop 瀏覽器滾動部分高度

document.documentelement.clientheight 瀏覽器所有內容高度,document.body.clientheight 瀏覽器可視部分高度

瀏覽器所有內容高度即瀏覽器整個框架的高度,包括滾動條捲去部分+可視部分+底部隱藏部分的高度總和

瀏覽器滾動部分高度即滾動條捲去部分高度即可視頂端距離整個物件頂端的高度。

看懂了上面的引數我們就可以做出相容ie,ff,chrome瀏覽器的滾動效果了。