← All posts

Tutorials

Auto-pager — infinite scroll on any page

15 May 2026 · by JustZix Team

A forum, a blog archive, search results — content split across 40 pages with a "Next" link at the bottom. Click, wait, click, wait. Auto-pager does it for you: when you reach the bottom, the rule fetches the next page and appends its content. Infinite scroll on a page that does not have it.

The idea

Every paginated page has two things: a "next" link (often <a rel="next">) and a container with the actual content. Auto-pager:

1. Detects that you have scrolled near the bottom.
2. Fetches the next page's HTML via fetch.
3. Extracts the content container and appends its children to the current one.
4. Swaps the "next" link for the one from the new page — and repeats.

The rule

The rule's JavaScript — adjust the two selectors at the top to the specific site:

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;
});

Two selectors to tune

• NEXT — the link to the next page. a[rel="next"] works surprisingly often; if not, use the button's class, e.g. .pagination-next.
• LIST — the container with the content you append. On a forum it is the post list, in results it is the result list. Check in the JustZix JS Console what their common parent is.

How it works

Detecting the bottom

innerHeight + scrollY is the position of the window's bottom edge within the document. When it nears document.body.offsetHeight (with a 1200 px margin), it is time to pull more.

The loading lock

The scroll event fires dozens of times per second. The loading flag guarantees one fetch runs at a time — without it you would append the same page twenty times.

DOMParser

fetch returns raw HTML as text. DOMParser turns it into a queryable document, from which querySelector pulls just the content container — without the new page's header, footer and menu.

Pitfalls

• JavaScript-rendered content. If the page renders the list only in JS, the raw HTML from fetch will be empty. Auto-pager works on server-rendered pages.
• Scripts do not run. Appended HTML is static DOM — a <script> from the new page will not fire. For content (text, links, images) that is not a problem.
• The document grows. After 30 appended pages the DOM is heavy. That is the price of infinite scroll — reload the page now and then.

See also

• Examples — the auto-pager snippet ready to paste
• Injection and CSP — when fetch meets restrictions
• Output Console — watch what the rule does

Install JustZix — and scroll instead of clicking "Next".