Как реализовать бесконечный/бесконечный прокрутки в 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