Message Scroller

Accessible scrolling behavior for long conversations with anchored messages.

Use MessageScroller when a conversation needs preserved position, scroll-to-start and scroll-to-end controls, or automatic following while new messages arrive.

Built on @shadcn/reactUpstream API

We’ve received the booking request.

The technician is reviewing the vehicle history now.

I’ll send the estimate as soon as it is ready.

Composition

Wrap the scroller in MessageScrollerProvider, then compose MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, and MessageScrollerButton.

Accessibility

Give the viewport a conversation-specific label. Keep both scroll buttons keyboard reachable and name them by direction. New messages should not steal focus from the composer.

Best practices

Give the scroller a bounded height so the viewport can calculate overflow.
Anchor the newest message and enable auto-scroll only when following live updates is expected.
Preserve the reader's position when earlier history loads above the visible messages.