1. 程式人生 > >上拉加載事件

上拉加載事件

解析 con 操作 bsp ajax ons scrolltop dom 器)

//上拉加載更多
$(window).on("scroll",function() {

var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();

console.log(scrollTop, windowHeight, scrollHeight);

if(scrollTop + windowHeight == scrollHeight) {**請求AJAX**}
});

$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollTop + windowHeight == scrollHeight) {

//此處是滾動條到底部時候觸發的事件,在這裏寫要加載的數據,或者是拉動滾動條的操作


}
});

解析:

判斷滾動條到底部,需要用到DOM的三個屬性值,即scrollTop、clientHeight、scrollHeight。


scrollTop為滾動條在Y軸上的滾動距離。
clientHeight為內容可視區域的高度。
scrollHeight為內容可視區域的高度加上溢出(滾動)的距離。
從這個三個屬性的介紹就可以看出來,滾動條到底部的條件即為scrollTop + clientHeight == scrollHeight。(兼容不同的瀏覽器)。

上拉加載事件