v149 · overscroll · feeds

Pull to Load More

Scroll to the bottom of the feed and keep pulling. The sentinel zone turns blue when the load threshold is crossed; release and the next page loads. An IntersectionObserver on the sentinel drives the load, overscroll-behavior-y: contain prevents the pull from bouncing the outer page.

Scroll to the bottom of the feed, then keep scrolling to trigger a load.
Developer Feed Page 1 / ∞
↓ pull past here to load more
Posts: 0 Page: 1 Loads triggered: 0 Scroll: 0% 
// Detect when the sentinel enters the viewport
const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting && !loading) {
    loadNextPage();
  }
}, {
  root: feedEl,
  rootMargin: '0px',
  threshold: 0.8,         // 80% visible = trigger
});

observer.observe(sentinel);

// overscroll-behavior: contain keeps the pull
// gesture from also scrolling the outer page
feedEl.style.overscrollBehaviorY = 'contain';

async function loadNextPage() {
  loading = true;
  sentinel.textContent = 'Loading…';
  const items = await fetchPage(currentPage++);
  items.forEach(item => renderPost(item));
  sentinel.textContent = '↓ pull past here to load more';
  loading = false;
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗