Scroller

Lays its children out in a single row that scrolls horizontally.

Example

View Code 
<div class="scroller" data-snap data-width="sm" role="region" aria-label="Featured articles" tabindex="0">
    <article>One</article>
    <article>Two</article>
    <article>Three</article>
    <article>Four</article>
</div>

When to use it

A scroller is for a row that should stay a row: a strip of photos, a set of related cards, a filmstrip of steps. Where a cluster would wrap, a scroller keeps everything on one line and lets the visitor move along it.

How it works

A flex row that does not wrap, with overflow-x: auto. Children are told not to shrink, so the row overflows and the container scrolls. data-snap adds scroll snapping so items land cleanly at the start edge; data-width gives every item the same width so the strip reads as a sequence of equal frames. Because a scrolling region is an interactive one, the markup carries tabindex="0" and an accessible name; the validator insists.

Why this name

What the visitor does is scroll, so the layout is a scroller; a name for the mechanism (a reel, a track) would say less. Foundation 6 had no layout for a row that scrolls; people hid the overflow by hand.

Attributes

Attribute Type Values Default Description
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl md Space between items.
data-snap boolean Snap each item's start edge into place as the track scrolls.
data-width enum 2xs, xs, sm, md, lg, xl, 2xl Give every item this width instead of its natural one.

Children

  • > *: at least 1. The items. None shrinks; the track scrolls instead. A single wide item (a table, an image) is legal: the scroller then just gives that one item horizontal overflow.

Tokens

Token Description
--yeti-space-md The default gap.
Internal tokens (may change between minor versions) - `--_yeti-gap`

Accessibility

  • Role: region
  • Required attributes: tabindex, aria-label or aria-labelledby
  • A scrollable region must be reachable from the keyboard: give it tabindex="0", role="region", and a name with aria-label.
Key Action
Tab Focuses the track so the arrow keys can scroll it.
ArrowLeft / ArrowRight Scroll the track.

Browser support

  • Used without guards: flexbox gap, scroll snap, overscroll-behavior
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.