Terms Acceptance Checkbox — Free Scroll-to-Enable Consent Pattern

The terms acceptance checkbox pattern is the "you must actually read this" gate used before signup, checkout, or any binding agreement: a scrollable terms box, a checkbox that starts disabled, and a Continue button that stays disabled until both the scroll and the checkbox conditions are satisfied. This snippet implements the scroll detection for real — reading the box's actual scroll position — rather than faking it with a timer that just waits N seconds regardless of whether anyone scrolled.

Real scroll-position math, not a timer

The core check is el.scrollTop + el.clientHeight >= el.scrollHeight - SCROLL_TOLERANCE_PX. scrollTop is how far the content has scrolled, clientHeight is the visible viewport height, and scrollHeight is the full content height — when their sum reaches the total height (within a small pixel tolerance for sub-pixel rounding across browsers), the user has genuinely reached the bottom. A setTimeout-based fake would let someone tab away and come back "read"; this only fires from a real scroll event.

A one-way unlock

Once hasScrolledToEnd flips to true, the listener short-circuits (if (hasScrolledToEnd) return) — scrolling back up doesn't re-lock the checkbox. This matches how these gates are meant to work: you've proven you reached the end at least once, and don't need to re-prove it by staying there.

Short-content edge case handled

If the terms box is short enough that its content never needs scrolling — scrollHeight already equals clientHeight — the same isScrolledToBottom check runs once on load and unlocks the checkbox immediately, so a legitimately-short agreement doesn't trap the user in an impossible-to-satisfy state.

Two independent conditions gate Continue

The Continue button only enables when *both* hasScrolledToEnd is true *and* the checkbox is checked — either alone isn't enough. updateContinueState() runs on every checkbox change and re-evaluates both flags, so unchecking the box after scrolling correctly re-disables Continue.

Clear, changing hint text

The hint above the box starts as an instruction ("Scroll to the bottom to enable the checkbox") and updates to confirmation copy once unlocked, giving a visible, non-color-dependent signal of state alongside the checkbox's own disabled/enabled styling.

Customizing it

Swap the tolerance value for stricter/looser detection, add a scroll-progress indicator, or require an additional delay-after-unlock for extra-sensitive agreements. Pair it with a checkout form or gdpr-consent-manager.