ui patterns
Pagination vs infinite scroll
Pagination or infinite scroll - which should you use?
Two ways to handle a list too long for one screen: pagination breaks it into numbered pages you step through, while infinite scroll loads more automatically as you reach the bottom. One gives you control and an end; the other gives you flow and no edges.
Also known as: infinite scroll vs pagination, load more vs pagination
The demo
A list of results, handled two ways. Try to reach the footer, or get to item 30 - then switch modes and see how differently each pattern treats you.
Scroll the list, or jump to a page, and watch how the footer behaves.
What this demo shows (text version)
A scrollable window containing a list of results. In pagination mode it shows one page of eight items at a time with numbered page controls beneath, and a footer (contact, terms, settings) sits directly below the pager, easy to reach. You can jump straight to any page, so reaching item 30 takes one click.
In infinite-scroll mode, scrolling to the bottom loads another batch of items automatically, which pushes the footer further down every time, so it becomes practically unreachable. There are no page numbers to jump with, and leaving and returning would lose your place. The demo lets you feel the trade-off: pagination gives control and a reachable footer; infinite scroll gives uninterrupted flow but orphans the footer and your position.
With pages you could jump straight to item 30 and the footer sat right there waiting. With infinite scroll you drifted happily for a while - then the footer kept fleeing and you lost any sense of where you were. Neither is better; they buy opposite things, and the demo lets you feel exactly what each costs.
Match the pattern to the task. Infinite scroll suits open-ended browsing with no target - a feed, a gallery - where flow matters and nobody wants to click "next". Pagination suits finding and returning: search results, tables, anywhere people need to judge how much there is, jump to a spot, or come back to the same place later.
Infinite scroll has two stings worth naming. It orphans the footer - links to contact, terms, settings become almost unreachable - and it breaks "back": leave and return and you are dumped at the top, your place lost. A "load more" button is the honest middle ground, keeping the flow but handing control back. Whatever you choose, never trap the footer.