Scroller
Display an overflowing list of items.
Best Practices
When to use
- Use Scroller for an overflowing list of peer items along a single axis: chip rows, log streams, code snippets, command palettes.
- Pick
verticalfor stacked feeds,horizontalfor chip and tile rails,freeonly when content genuinely scrolls in both directions (logs with very long lines). - For paginated or virtualized data sets larger than a few hundred items, render with a virtualization library inside the Scroller rather than dumping every node into the DOM.
Behavior
- Auto-scroll buttons target direct children only. If items are wrapped in extra layout nodes the buttons won’t find their target.
- Show edge fade or shadow affordances on the clipped axis so users see there’s more content past the viewport.
- Keep item widths and gaps consistent in horizontal scrollers; ragged edges break the snap rhythm and make the rail feel broken.
Accessibility
- Tab order follows DOM order, so place items in reading order regardless of visual scroll direction.
- Scroller buttons need
aria-labels that name the direction and content (Scroll customer logos left), not barePrevious/Next. - Make sure focusing an off-screen item scrolls it into view; the default browser behavior covers this, but custom focus traps can break it.
Was this helpful?