infinity.js

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

Для его работы у вас на странице должны быть:

1. Раздел с содержимым, к которому будет дописываться содержимое следующих страниц. Например, заданный так:

   <div class="messages">Первая страница</div>

2. Раздел со списком страниц, содержимое которого будет заменяться при открытии следующих страниц. В нём должна быть отмечена ссылка на следующую страницу. Например, такой:

   <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.

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

Демо

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

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 в скрипте.