Infinite Scroll

Infinite scroll is an interface pattern where additional items are fetched and appended as the visitor scrolls toward the end of the current list, so there are no pagination links. Social feeds and image galleries commonly use it.

Why it matters

It keeps browsing fluid for casual, exploratory content, but it creates real problems. Footers become unreachable, scroll position and the back button are hard to restore, and the DOM grows until the page slows down. Crawlers do not scroll, so content only reachable by scrolling can stay unindexed unless paginated URLs also exist. Keyboard and screen reader users can struggle with content that keeps changing.

Example

const sentinel = document.querySelector("#sentinel");
const io = new IntersectionObserver(async ([entry]) => {
  if (!entry.isIntersecting) return;
  const items = await fetch(`/api/items?page=${++page}`).then(r => r.json());
  render(items);
});
io.observe(sentinel);

An IntersectionObserver watches an element at the end of the list and loads the next page when it enters view, which is more efficient than listening to scroll events.

Common mistakes

• No fallback links to paginated URLs for search engines and no-JavaScript users.
• Never removing off-screen items, so memory use grows.
• Failing to preserve scroll position after navigating away and back.
• Offering a "load more" button would often be the safer alternative.

Related

• Lazy loading
• Debounce and throttle
• Fetch API
• Crawl budget

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.