infinity.js - это универсальный скрипт бесконечной прокрутки, который не считает пиксели без нужды при каждой минимальной прокрутке страницы и умеет останавливаться после нескольких страниц. Если вы когда-либо хотели прикрутить бесконечную прокрутку к какому-нибудь старому сайту, то время пришло.

Для работы этого скрипта у вас на странице должны быть раздел с контентом, и раздел со списком страниц и ссылкой на следующую страницу.

Контент

В конец к разделу с контентом будет дописываться содержимое следующих страниц. 

<div class="messages">
    <p>Содержимое первой страницы</p>
</div>

Список страниц

Cодержимое раздела со списком страниц будет заменяться при открытии следующих страниц. В списке страниц должна быть отмечена ссылка на следующую страницу.

<div class="pager">
  <a href="index.html">Страница 1</a>
  <a href="2.html" class="nextpage">Страница 2</a>
  <a href="3.html">Страница 3</a>
  <a href="4.html">Страница 4</a>
  <a href="5.html">Страница 5</a>
  <a href="6.html">Страница 6</a>
  <a href="7.html">Страница 7</a>
</div>

В самом минимальном варианте в нём может быть лишь ссылка на следующую страницу. 

<div class="pager">
  <a href="2.html" class="nextpage">Следующая страница</a>
</div>

Селекторы для поиска разделов задаются в удобном и подходящем виде прямо в скрипте в переменных elementContainerSelector, pagerSelector и nextPageSelector.

Весь скрипт подробно откомментирован, потому читайте его без опаски.

Демо

Склонируйте код с примерами:

git clone https://github.com/sanmai/infinity.js.git
cd infinity.js/

Затем запустите что вам по душе:

python -m SimpleHTTPServer

Или:

php -S localhost:8000

И проследуйте по ссылке чтобы своими глазами увидеть как загружаются новые страницы при прокрутке.

В консоли можно будет наблюдать открытие следующих страниц при прокрутке.

Serving HTTP on 0.0.0.0 port 8000 ...
127.0.0.1 - - [00:00:35] "GET /example/ HTTP/1.1" 200 -
127.0.0.1 - - [00:00:35] "GET /infinity.js HTTP/1.1" 200 -
127.0.0.1 - - [00:00:37] "GET /example/2.html HTTP/1.1" 200 -
127.0.0.1 - - [00:00:37] "GET /example/3.html HTTP/1.1" 200 -

По умолчанию для просмотра четвертой страницы требуется явное действие пользователя. Количество страниц, после которых происходит остановка, настраивается в переменной maxPages в самом скрипте.