16 utilities · 5 React hooks · TypeScript types · ESM + CJS + UMD bundles. Zero dependencies.
Throttled listener giving you exact position, percentages and direction in real time.
The top nav is using it live. Mini-nav below is also synced.
Fires once after 200ms of idle scroll. Great for lazy-loading or analytics.
Click a card — if the target is already visible, nothing happens.
Pick a curve — watch the ball animate across the track.
Cards animate in as they enter the viewport using IntersectionObserver.
Lock body scroll for modals or drawers. Restores position on unlock.
Chain multiple animations with pauses between steps. Cancel mid-flight.
Three layers moving at different speeds. Scroll slowly through this section.
↑ Scroll to see layers move at different speeds
0 when the element enters the viewport, 1 when it fully exits. Scroll the article box.
scroll-snap-kit gives you precise control over every aspect of scroll behaviour. Whether you need smooth navigation, progress tracking, or choreographed animations, the API is minimal and composable.
The scrollProgress utility fires a callback with a normalised 0–1 value as the user scrolls through the target element. Build reading progress bars, reveal animations, or sticky sidebars that respond to content position.
Unlike page-level scroll percentage, scrollProgress is scoped to a single element — independently track multiple articles or components on the same page without interference.
Under the hood it uses getBoundingClientRect on every scroll event, throttled via requestAnimationFrame for smooth performance even on long pages.
Keep scrolling this box to reach 100% ✨
After scrolling stops, snaps to the nearest section. Try scrolling the box below.
Elements animate in as they enter the viewport. Pick an effect and click Reset to replay.
Drives CSS custom properties from scroll position. The text below fades, scales, and the background shifts as you scroll through this section.
Fires a callback when the user scrolls near the bottom. Auto-throttled with configurable cooldown. Scroll the feed below to load more items.
While the trap is active, scroll is locked to the modal box — the page behind won't move. Handles wheel, touch, and keyboard.
This is a scrollable modal. When the trap is active, scrolling inside this box will not leak to the page behind it.
Try it: enable the trap, then scroll here. The background page will stay perfectly still while this content scrolls normally.
scrollTrap handles mouse wheel events, touch scroll, and keyboard arrow keys — all three input methods are intercepted.
When the trap is disabled, scroll behaves normally on both this element and the page.
This is essential for accessible modals, drawers, and overlays where scroll leaking breaks the UX.
Scroll all the way down here ↓
✓ You reached the bottom of the modal!