如何知道用戶是否在當前文檔末尾

Question

對不起我：大家好。我希望我不會在你的問題題目中混淆你。

背景：我想要的實際是更新網站的內容。我被告知整個谷歌以及Stackoverflow的一些插件，如infinite-scroll，但我不想爲此使用任何插件。然後我發現了一個純粹的jQuery代碼來檢測用戶在文檔上的當前位置。這是這樣的：

$(window).scroll(function() { 
if($(window).scrollTop() + $(window).height() == $(document).height()) { 
    alert("bottom!"); 
} 
}); 

我發現了什麼：

我發現這個代碼在這裏：Check if a user has scrolled to the bottom

因此，這意味着我已經看過計算器上的所有問題。

問題：問題是上面的代碼工作不公平。只有當我使用：== $(document).height()時它才能正常工作，因爲它只會在用戶處於文檔結尾時運行代碼。一旦我嘗試使用像：$(document).height() - 100或類似的東西。它不起作用。我必須到文檔的末尾，當我回來時它顯示警報！這對用戶來說不太可能。

我也嘗試過unbind('scroll')，但一旦它通過警報就會停止執行代碼！我的意思是它只提醒用戶一次，所以它間接地會爲用戶加載數據一次，並且會停止再次加載更多的數據。

所以我想在這裏提出這個問題會是一個更好的主意。我可以得到一個簡單的jQuery代碼，它可以瞭解用戶在屏幕上的存在！並且批量數據一次，因爲當我使用> $(document).height()時，它會一直顯示彈出窗口，但它應該停止顯示彈出窗口，並在請求完成後再次顯示彈出窗口！

或者用簡單的話：

或者換句話說，我要的是該請求應該在用戶已經80％一路下跌至底部，所以，當他達到近95％進行在頁面的第三部分中，數據被放置在那裏，並且他可以查看它，然後當他達到80％的部分下來請求時再次進行。等等！這部分很容易理解。

利用這個原理：

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     alert("Sending ajax request!"); 
     $.ajax({ 
     url: "ajax_requests/send_email_digest", 
     success: function (data) { 
      // show the data..if any 
     } 
     }); 
    } 
}); 

但這並不：

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == 
    $(document).height() - 100) { 
     alert("Sending ajax request!"); 
     $.ajax({ 
     url: "ajax_requests/send_email_digest", 
     success: function (data) { 
     // show the data..if any 
     } 
    }); 
    } 
}); 

Answer 1

我不認爲滾動功能要求你滾動每個像素。你必須是幸運的，如果語句來獲得比賽在這個

if($(window).scrollTop() + $(window).height() == $(document).height() - 100) 

我認爲你必須與檢測解決，如果用戶在頁面底部的20％，你可以使用一個全局變量來檢查運行中的ajax請求。

var requesting = false; 
$(window).scroll(function() { 
    if(!requesting && 
     (($(window).scrollTop() + $(window).height()) >= ($(document).height() * 0.8))) { 
     requesting = true; 
     alert("Sending ajax request!"); 
     $.ajax({ 
     url: "ajax_requests/send_email_digest", 
     success: function (data) { 
     // show the data..if any 
     } 
    }).done(function(){ 
     requesting = false; 
    }); 
    } 
});