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

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

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

Ответы

Ответ 1

Самый простой способ - проверить, достигли ли вы дна и запускать событие click-event на вашем "загружать больше" -книга.

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

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

Обновление

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

Update2

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