← Все статьи

Туториалы

Auto-pager — бесконечная прокрутка на любой странице

15 мая 2026 · автор JustZix Team

Форум, архив блога, результаты поиска — контент, разбитый на 40 страниц со ссылкой «Далее» внизу. Клик, ожидание, клик, ожидание. Auto-pager делает это за тебя: когда ты доходишь до низа, правило подгружает следующую страницу и дописывает её контент. Бесконечная прокрутка на странице, у которой её нет.

Идея

У каждой пагинированной страницы есть две вещи: ссылка «далее» (часто <a rel="next">) и контейнер с настоящим контентом. Auto-pager:

1. Замечает, что ты прокрутил близко к низу.
2. Подгружает HTML следующей страницы через fetch.
3. Извлекает контейнер контента и дописывает его детей к текущему.
4. Заменяет ссылку «далее» на ссылку новой страницы — и повторяет.

Правило

JavaScript правила — адаптируй два селектора вверху под конкретный сайт:

const NEXT = 'a[rel="next"]';
const LIST = '#content';
let loading = false;
addEventListener('scroll', async () => {
  if (loading || !document.querySelector(NEXT)) return;
  if (innerHeight + scrollY < document.body.offsetHeight - 1200) return;
  loading = true;
  const next = document.querySelector(NEXT);
  const html = await fetch(next.href).then(r => r.text());
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const more = doc.querySelector(LIST);
  if (more) document.querySelector(LIST).append(...more.childNodes);
  const nn = doc.querySelector(NEXT);
  nn ? (next.href = nn.href) : next.remove();
  loading = false;
});

Два селектора для настройки

• NEXT — ссылка на следующую страницу. a[rel="next"] работает удивительно часто; если нет, используй класс кнопки, например .pagination-next.
• LIST — контейнер с контентом, который ты дописываешь. На форуме это список постов, в результатах — список результатов. Проверь в JS Console JustZix, какой у них общий родитель.

Как это работает

Определение низа

innerHeight + scrollY — это позиция нижнего края окна в документе. Когда она приближается к document.body.offsetHeight (с запасом 1200 px), пора подтягивать ещё.

Блокировка loading

Событие scroll срабатывает десятки раз в секунду. Флаг loading гарантирует, что выполняется один fetch за раз — без него ты дописал бы одну и ту же страницу двадцать раз.

DOMParser

fetch возвращает сырой HTML как текст. DOMParser превращает его в документ, который можно запрашивать, из которого querySelector извлекает только контейнер контента — без шапки, футера и меню новой страницы.

Ловушки

• Контент, рендерящийся JavaScript'ом. Если страница рендерит список только в JS, сырой HTML из fetch будет пустым. Auto-pager работает на страницах, рендерящихся на сервере.
• Скрипты не выполняются. Дописанный HTML — это статический DOM — <script> с новой страницы не срабатывает. Для контента (текст, ссылки, изображения) это не проблема.
• Документ растёт. После 30 дописанных страниц DOM тяжёлый. Это цена бесконечной прокрутки — перезагружай страницу время от времени.

Смотри также

• Примеры — сниппет auto-pager, готовый к вставке
• Внедрение и CSP — когда fetch встречает ограничения
• Output Console — наблюдай, что делает правило

Установи JustZix — и прокручивай вместо кликов «Далее».