按需滾動加載數據

Question

我正在通過滾動實現按需加載數據。

我在document.ready中為div注冊了這個函數。

只有在滾動到達最后一個時才應填充數據。 所以要確定滾動是否已到達，直到最后我使用以下功能。

$("#tree").scroll(function () {
                if (isScrolledToBottom(this)) {

                }
            });

但該函數未返回正確的值。 我的意思是當滾動到達最后一個時它應該返回一個真值。

function isScrolledToBottom(object) {
            return ($(object).attr('scrollHeight') - $(object).scrollTop() - 1) <= $(object).height();
        };

Answer 1

試試這個：

return ($(object).attr('offsetHeight') + $(object).attr('scrollTop') >= $(object).attr('scrollHeight'));

Answer 2

如果你想進行無限滾動，請在這里查看我的答案： 如何根據用戶滾動加載網頁內容

此演示在某個Y滾動位置觸發。 如果您希望在用戶到達某個項目時專門完成此操作，您可能需要查看Waypoints插件。

http://imakewebthings.com/jquery-waypoints/

無限卷軸演示： http ： //imakewebthings.com/jquery-waypoints/infinite-scroll/

$('.theItems:last').waypoint(function(event, direction) {
    //Ajax fetch here
});

Answer 3

 var scrollHeight = $(object).prop("scrollHeight"); // total scrollable height of the element 
    var scrollTop = $(object).scrollTop(); // how far you have come from the top while scrolling vertically
    var height =  $(object).height(); // the constant height of the portion in display at all times

    if (scrollHeight === (scrollTop + height)) {
        //console.log("fetching page");
        fetchNextPage();
    }