Sticky chat scrolling that knows when to let go

What it does

useStickToBottom is a React hook and companion component that pins a scrollable container to its bottom edge as content streams in—think AI chat transcripts—then releases gracefully when the user scrolls up to read history. It replaces the browser’s native overflow-anchor behavior with a manual, cross-browser implementation that handles both growing and shrinking content without visual jumps. The package ships with a ready-made <StickToBottom> wrapper or a bare hook for custom architectures.

The interesting bit

Instead of naive easing curves with fixed durations, it uses a custom velocity-based spring animation that adapts to variable-sized chunks arriving mid-scroll—the exact failure mode of typical chat UIs when tokens stream in at irregular intervals. It also distinguishes user-initiated scrolls from its own programmatic ones without debouncing, so it won’t wrestle control back from someone trying to read an earlier message.

Key highlights

• Zero dependencies, and deliberately avoids overflow-anchor so Safari is fully supported.
• ResizeObserver-driven, so it stays locked even if content above the viewport shrinks or grows.
• Exposes context values like isAtBottom and a scrollToBottom promise so child components can react to scroll state.
• Returns a Promise<boolean> from programmatic scrolls, resolving false if the user cancelled mid-flight.
• Powers StackBlitz’s own bolt.new, so it has seen production chat traffic.

Verdict

Worth a look if you’re building any streaming message UI and have already lost patience with scroll position bugs. Skip it if your content is static or you are happy with the browser’s default anchoring.