Infinite Scroll HTML CSS JS — IntersectionObserver Feed

Infinite scroll is a feed loading pattern where content loads automatically as the user approaches the bottom of the page, removing the need for "Load More" buttons or pagination. Used by Twitter, Instagram, LinkedIn, and most modern content feeds, it creates an uninterrupted reading experience by fetching the next batch of content just before the user reaches the end of what has already loaded.

The naive implementation — listening to the scroll event and checking scrollTop + clientHeight >= scrollHeight — fires hundreds of times per second during scroll, runs on the main thread, and degrades performance. The modern approach uses IntersectionObserver, which fires asynchronously only when a target element enters or leaves the viewport.

This snippet builds a complete infinite scroll article feed using IntersectionObserver with a sentinel pattern, batch loading with skeleton placeholders, a configurable maximum batch count, and an end-of-feed message — all in plain JavaScript.

The Sentinel Pattern

A sentinel is an invisible element placed after the last rendered card. When the sentinel enters the viewport (becomes visible as the user scrolls down), the IntersectionObserver fires and loads the next batch. When loading is complete, the sentinel is still below the new cards, ready to trigger the next batch when reached again.

The sentinel element: <div class="sentinel" id="sentinel"></div>. It has zero visual size. The observer is created with rootMargin: '120px' — this means the observer fires 120px before the sentinel actually enters the viewport. This gives enough time to generate and inject the new cards so the user never sees a loading gap. The rootMargin acts as a pre-fetch buffer.

IntersectionObserver Setup

const observer = new IntersectionObserver(entries => { if (entries[0].isIntersecting && !loading && batch < MAX_BATCHES) { loadBatch(); } }, { rootMargin: '120px' }); observer.observe(sentinel);

The isIntersecting check fires only when the sentinel is visible (not on exit). The loading flag prevents concurrent batch loads. The batch < MAX_BATCHES check stops loading when all content is exhausted. The observer is disconnected when MAX_BATCHES is reached, since no further loading is needed.

Skeleton Placeholder Pattern

Before each batch of real cards loads, skeleton placeholder cards are injected into the feed. Each skeleton is a <div class="card skeleton"> with grey placeholder elements where the image, title, and meta text would appear. A CSS shimmer animation sweeps a lighter gradient across the placeholders — the same GPU-accelerated background-position technique used by Facebook and LinkedIn.

After a simulated 700ms delay (representing the API response time), the skeleton cards are removed with skeletons.forEach(s => s.remove()) and replaced with the real article cards. In production, the setTimeout would be replaced by an await fetch() call.

Batch Generation

The snippet includes a large titles array (30 entries) and a tags array. Each appendCards(batchIndex) call slices 6 entries from the titles array starting at batchIndex × BATCH_SIZE. Each card is created with document.createElement, populated with title, a formatted date, a reading time estimate, and a randomly selected tag. All 6 cards are appended to the feed via documentFragment for a single reflow rather than 6 individual DOM insertions.

DocumentFragment Batch Append

DOM insertions are expensive because each appendChild triggers a potential reflow. The snippet uses const frag = document.createDocumentFragment() — appending all 6 new cards to the fragment first, then calling feedList.appendChild(frag) once. This batches all 6 DOM insertions into a single reflow, reducing layout thrashing by 6×.

End of Feed

When batch >= MAX_BATCHES, the observer is disconnected with observer.disconnect() and an end-of-feed message is revealed: a checkmark icon with "You've reached the end." This prevents infinite loading when the content pool is exhausted and gives users clear closure. The end message uses endMsg.style.display = 'flex' to reveal the pre-rendered hidden element.

Article Count Label

The feed header shows "N articles" and updates after each batch load: feedCountEl.textContent = Math.min(batch * BATCH_SIZE, totalCards) + ' articles'. This gives users a sense of content volume without exposing implementation details like batch numbers.

Performance vs Scroll Listener

The IntersectionObserver approach fires at most once per batch and runs in a browser-managed background thread. A scroll listener equivalent would fire 60+ times per second during scroll, run synchronously on the main thread, and require throttle() or requestAnimationFrame() wrapping to not degrade scroll performance. IntersectionObserver is the correct tool for any "trigger action when element is visible" use case.