如何在Javascript/jQuery的DIV內實現無限/無限滾動

我意識到這裏有幾個問題可以解決無限滾動的問題。但是他們大多數都在使用插件。如何在Javascript/jQuery的DIV內實現無限/無限滾動

我想知道如何實現無盡的滾動，將與我現有的分頁功能。目前我有一個「加載更多」按鈕，點擊後，將獲取下10個項目，並追加到列表中。當點擊「加載更多」按鈕時，我不希望在滾動位置到達底部時發生這種情況。此外，此列表不在主頁面上，它位於DIV內。將頁碼存儲在ID爲'pageNum'的隱藏字段中。

$.ajax({ 
     type: "GET", 
     url: "/GetItems", 
     data: { 'pageNum': $('#pageNum').val() }, 
     dataType: "json", 
     success: function (response) { 
       $('#MyDiv ul').append(response.Html); 
       $('#pageNum').val(response.PageNum); 
      } 
     } 
}); 

#MyDiv 
{ 
    border:solid 1px #ccc; 
    width:250px; 
    height:500px; 
    overflow-y: scroll; 
} 

<div id="MyDiv"> 
    <ul> 
    <li>...</li> 
    ... 
    </ul> 
</div>

來源

2013-03-03 Prabhu

也許最簡單的方法是將一個元素放在列表的最底部，然後當它進入視圖時，你知道他們向下滾動，所以你加載更多。你可以找到幾個關於如何檢查一個元素在視口中的答案 – 2013-03-03 01:09:04

謝謝，這聽起來像它會工作，但它究竟如何與我的代碼在這裏集成。我發現這：http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport但是，我什麼時候會調用elementInViewport函數？ – Prabhu 2013-03-03 01:16:42

的最簡單的方法，是檢查，如果你已經達到了底部，並觸發然後點擊事件上的「加載更多」按鈕上。

$(window).on('scroll', function(){ 
    if($(window).scrollTop() > $(document).height() - $(window).height()) { 
     $("#load-more").click(); 
    } 
}).scroll();

上面的腳本只是一個例子，不要在您的生產環境中使用它。

更新

...和更好的方法是調用的函數，而不是觸發它調用函數的事件。

UPDATE2

...而最好的方法：讓用戶決定是什麼，如果他做這樣做（在這種情況下，他向下滾動，以達到你的頁面的末尾，不進入下一個頁）;）

來源

2013-03-03 04:37:06 yckart

而不是'點擊'，最好調用按鈕使用的函數。（+1無論如何） – Doorknob 2013-03-03 04:39:20

注意，如果你已經在頁面的底部並刷新它，這可能不起作用：你已經在最下面，滾動觸發器沒有被觸發 – Asenar 2013-11-22 15:19:26

@Asenar我已經更新了我的答案。觸發滾動事件（或觸發點擊事件，或甚至更好地調用按鈕使用的功能）頁面加載應該做的伎倆... – yckart 2013-11-22 16:23:54

如何在Javascript/jQuery的DIV內實現無限/無限滾動

回答

相關問題