if（$（window）.scrollTop（）== $（document）.height（） - $（window）.height（） - 300）為什么這不起作用？

Question

我的無限卷軸有問題。 我希望在頁面底部的300px之前執行更多的加載。

我檢測到滾動：

$window.scroll(function(){

在這個函數中我測試了這個：

if (($document.height() - $window.height()) == $window.scrollTop()) {

但這只適用於我們的頁腳。

然后我測試一下：

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 300)

但無限滾動在300px和頁面底部之間運行幾次。

在此之后，我想測試一下：

if ($(window).scrollTop() == $(document).height() - $(window).height() - 300)

但這不起作用，我不明白。 你有想法嗎？

非常感謝

Answer 1

要檢查的條件很簡單：

if($(window).scrollTop() + $(window).height() > $(document).height() - 300){}

可能==或===可能不起作用，因為它不會達到完全等於條件。

編輯： 根據要求我添加了代碼以防止多次調用頁面加載功能。 在加載新內容之前，會發生什么事情是對事件進行簡單的解除綁定。 一旦完成，事件將再次被綁定。 所以，你可以使用>仍然只調用一次load函數。 我創建了一個簡單的setTimeout來模擬代碼中來自ajax請求的延遲。

---

---鏈接到FIDDLE ---

---

看看這個簡單的工作演示：

 var winCached = $(window), docCached = $(document) var currLeng = 0; function addContent() { dettachScrollEvent(); setTimeout(function() { //this timeout simulates the delay from the ajax post for (var i = currLeng; i < currLeng + 100; i++) $('div').append(i + '<br />'); currLeng = i; console.log("called loader!"); attachScrollEvent(); }, 500); } function infiNLoader() { if (winCached.scrollTop() + winCached.height() > docCached.height() - 300) { addContent(); //alert("near bottom! Adding more dummy content for infinite scrolling"); } } function attachScrollEvent() { winCached.scroll(infiNLoader); } function dettachScrollEvent() { winCached.unbind('scroll', infiNLoader); } addContent(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div></div>