scroll-snap-align

scroll-snap-align supplies a target box’s snap position. The scroll container enables snapping with scroll-snap-type; the target supplies start, center, or end alignment.

Snap panel starts

Focus the scrolling region and use arrow keys, or scroll horizontally. Each item defines a start snap position within the rail’s snapport.

<div
  class="rail"
  tabindex="0"
  role="region"
  aria-label="Scrollable practice panels"
>
  <div class="item">Panel one</div>
  <div class="item">Panel two</div>
  <div class="item">Panel three</div>
  <div class="item">Panel four</div>
</div>

.rail {
  display: flex;
  gap: 12px;
  width: 280px;
  max-width: 100%;
  overflow-x: auto;
  border: 2px solid #94a3b8;
  padding-block: 0.5rem;
}
.item {
  flex: 0 0 180px;
  min-height: 90px;
  background: #dbeafe;
  padding: 0.75rem;
  box-sizing: border-box;
}
.rail {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
}

Center panels where scroll range allows

Center aligns each panel’s center with the snapport’s center. Outer padding supplies room to center the first and last panels in this fixed-width demonstration.

<div
  class="rail"
  tabindex="0"
  role="region"
  aria-label="Scrollable practice panels"
>
  <div class="item">Panel one</div>
  <div class="item">Panel two</div>
  <div class="item">Panel three</div>
  <div class="item">Panel four</div>
</div>

.rail {
  display: flex;
  gap: 12px;
  width: 280px;
  max-width: 100%;
  overflow-x: auto;
  border: 2px solid #94a3b8;
  padding-block: 0.5rem;
}
.item {
  flex: 0 0 180px;
  min-height: 90px;
  background: #dbeafe;
  padding: 0.75rem;
  box-sizing: border-box;
}
.rail {
  width: 280px;
  padding-inline: 50px;
  box-sizing: border-box;
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: center;
}

Values and defaults

The initial value is none and the property is not inherited. One keyword applies in both axes. Two values set block then inline alignment, each chosen from none/start/center/end. None means that box contributes no snap position in that axis. Coordinate lengths and percentages are not valid values.

Common mistakes

Putting scroll-snap-align only on the container does not define its children’s snap positions. Put it on each intended target. A scrolling overflow box and an enabled snap axis are necessary. Start/end depend on writing mode and direction; they are not always left/right. The container may be unable to center an edge target without extra scrollable space.

Learn scroll-snap-type, scroll-margin, and scroll-padding.

Sources and browser support

MDN: scroll-snap-align describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.