Check if user scrolls to the bottom of the page

True when the viewport has reached the end of the page.

JavaScriptBrowser · DOM Version 1.0.0 · MIT · .md

function isAtBottom(tolerance = 1) { const { scrollHeight, clientHeight } = document.documentElement; return scrollHeight - clientHeight - window.scrollY <= tolerance; }

Usage

Markup

<div style="height: 3000px"></div>

Script

isAtBottom(); // → false
window.scrollTo(0, document.documentElement.scrollHeight);
isAtBottom(); // → true

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

Know the limits

• A 1 px tolerance absorbs fractional scroll positions on zoomed and high-density screens, where the original’s exact comparison could stay false at the bottom.
• To load more content, an IntersectionObserver on a sentinel element avoids checking on every scroll event.

The function above is the code the usage lines run. It does not validate its arguments; add checks where it receives untrusted input.

Keep exploring

• Check if a given DOMRect is contained within another DOMRect — True when the target lies inside the container or on its edges.
• Check if two DOMRects intersect — Two rects intersect when they meet on both axes.
• Compare two DOMRects for size and position match — Compare x, y, width and height exactly.