Cách triển khai cuộn vô tận/vô hạn trong DIV trong Javascript/jQuery

Question

Tôi nhận thấy có một số câu hỏi ở đây giải quyết vấn đề cuộn vô tận. Tuy nhiên, hầu hết trong số họ đang sử dụng plugin.

Tôi muốn biết cách triển khai cuộn vô tận sẽ hoạt động với chức năng phân trang hiện tại của tôi. Hiện tại tôi có nút "tải thêm", khi được nhấp vào, sẽ tìm nạp 10 mục tiếp theo và thêm vào danh sách. Thay vì làm điều này khi nút "tải thêm" được nhấp, tôi muốn nó xảy ra khi vị trí cuộn đến đáy. Ngoài ra, danh sách này không nằm trên trang chính, nó nằm trong một DIV. Lưu trữ số trang trong một trường ẩn với 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> 

Answer 1

Các Cách đơn giản nhất, là để kiểm tra xem bạn đã đạt đến đáy và để kích hoạt sau đó một nhấp sự kiện trên "nạp thêm" bạn -button.

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

Kịch bản trên chỉ là ví dụ, không sử dụng nó trong môi trường sản xuất của bạn.

cập nhật

... và cách tốt hơn là để gọi hàm thay vì kích hoạt một sự kiện mà gọi hàm.

Update2

... và cách tốt nhất: cho phép người dùng quyết định những gì là phải làm gì nếu ông làm (trong trường hợp này, ông cuộn xuống đến cuối trang của bạn, chứ không phải để đạt được tiếp theo trang);)