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

2021-08-10 14:16:48 字數 674 閱讀 7825

判斷滾動條到底部,需要用到dom的三個屬性值,即scrolltop、clientheight、scrollheight。

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

scrollheight為內容可視區域的高度加上溢位(滾動)的距離。

scrolltop:這個是什麼呢?他可以理解為滾動條可以滾動的長度。

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

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

從這個三個屬性的介紹就可以看出來,滾動條到底部的條件即為scrolltop + clientheight == scrollheight。

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

判斷滾動條到底部,需要用到dom的三個屬性值,即scrolltop clientheight scrollheight。scrolltop為滾動條在y軸上的滾動距離。clientheight為內容可視區域的高度。scrollheight為內容可視區域的高度加上溢位 滾動 的距離。從這個三個屬性的介紹...

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判斷滾動條是否到...