判斷滾動條是否滾動到底部

2021-06-18 01:15:39 字數 1141 閱讀 4368

先是對乙個dom元素的三個屬性先理解。分別是:clientheight、offsetheight、scrolltop。說說個人理解。

clientheight:這個元素的高度,占用整個空間的高度,所以,如果乙個div有滾動條,那個這個高度則是不包括滾動條沒顯示出來的下面部分的內容。而只是單純的div的高度。

offsetheight:是指元素內容的高度。依照上面的,那這個高度呢就是div內部的高度,包括可見部分及以滾動條下面的不可見部分。

scrolltop:這個是什麼呢?他可以理解為滾動條可以滾動的長度。舉例,如果乙個div高度是400px(即clientheight為400),而裡面的內容是乙個很長的列表,內容的高度是1000px(即offsetheight為1000)。那麼,可見部分我們看到400px,1000px的內容中還有600px不可見。而這不可見的部分呢,正是我們通過拉動滾動條才能把這一部分顯示出來。你如果滾動條不拉動,此時scrolltop為0,如果你把滾動條拉到底,顯示出列表最下面的部分,此時,scrolltop為600。 所以scrolltop的取值區間為[0,  600]。 所以這個600可以理解為滾動條可以滾動的長度。

理解完上面的這個概念之後。要判斷是否滾動到底部就很好做了。

首先,我們拉動滾動條,從最上面拉到最下面,變化的是scrolltop的值,而這個值是有乙個區間的。

這個區間是:  [0, (offsetheight - clientheight)]

即,滾動條拉動的整個過程的變化在 0 到 (offsetheight -  clientheight) 範圍之內。

1、判斷滾動條滾動到最底端: scrolltop == (offsetheight -  clientheight)

2、在滾動條距離底端50px以內: (offsetheight - clientheight) - scrolltop  <= 50 

3、在滾動條距離底端5%以內: scrolltop / (offsetheight - clientheight) >=  0.95

如上。如果要實現類似qq空間那種,拉到底部自動載入內容。只要註冊個滾動條事件:

varscrollbottomtest =function()

});}

滾動條滾動到底部

其實,滾動條是抽象為乙個 點 來對待。在內部div高度高於外部div高度,並且外部div允許出現垂直滾動條時,此時頁面載入後會出現滾動條。理解兩個屬性,scrollheihgt scrolltop,scrollheight為滾動條可以滾動的滾動的距離,即內部div的高度,scrolltop表示滾動條...

jquery如何判斷滾動條是否到底部

jquery判斷滾動條是否到底部的方法 1 使用 scrolltop 方法,jquery檢測瀏覽器window滾動條到達底部 2 使用 scroll div 檢測動條到達底部事件。本教程操作環境 windows7系統 jquery3.2.1版本,該方法適用於所有品牌電腦。jquery判斷滾動條是否到...

jquery如何判斷滾動條是否到底部

jquery判斷滾動條是否到底部的方法 1 使用 scrolltop 方法,jquery檢測瀏覽器window滾動條到達底部 2 使用 scroll div 檢測動條到達底部事件。本教程操作環境 windows7系統 jquery3.2.1版本,該方法適用於所有品牌電腦。jquery判斷滾動條是否到...