Как реализовать бесконечный/бесконечный прокрутки в DIV в Javascript/jQuery

Question

Я понимаю, что здесь есть несколько вопросов, которые затрагивают проблему бесконечной прокрутки. Однако большинство из них используют плагины.

Я хотел бы знать, как реализовать бесконечную прокрутку, которая будет работать с моими существующими функциями подкачки. В настоящее время у меня есть кнопка «загрузить больше», при нажатии на нее появятся следующие 10 элементов и добавятся в список. Вместо этого, когда нажата кнопка «загрузить больше», я бы хотел, чтобы это произошло, когда положение прокрутки опустилось до конца. Кроме того, этот список не находится на главной странице, он находится в пределах DIV. Хранение номера страницы в скрытом поле с идентификатором '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

простой способ, чтобы проверить, если вы достигли дна и вызвать затем щелчок-событие на вашей «нагрузки более» -Кнопка.

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

Сценарий, приведенный выше, является лишь примером, не используйте его в рабочей среде.

обновление

... и лучший способ, чтобы вызвать функцию вместо того, чтобы вызвать событие, которое вызывает функцию.

Update2

... и лучший способ: пусть пользователь решает, что делать, если он делает (в этом случае он прокручивает вниз, чтобы добраться до конца вашей страницы, а не достичь следующего стр.);)