Source

Scroll

The Scroll layout creates horizontal scrolling containers with optional snap behavior. This component is designed for creating smooth horizontal scrolling experiences with touch-friendly behavior, perfect for image carousels, card sequences, or any content that needs to scroll horizontally while maintaining usability across different devices.

Example

<div class="scroll --snappable --center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

Custom Properties

Property	Default	Description
`--layout-items`	`center`	Snap alignment for children when using --snappable modifier

Class Utilities

Class	Description
`.--snappable`	Enables scroll snap with mandatory snapping to each child
`.--start`, `.--end`, `.--center`, `.--stretch`	Controls snap alignment when using the --snappable modifier

← layout: Repel layout: Sidebar →