CSS scroll-snap-align Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The scroll-snap-align CSS property is used to control the alignment of scroll snap points within a scroll container. Scroll snap points are specific positions within a container that control where the container stops when scrolling, creating a smooth and predictable scrolling experience. By applying scroll-snap-align to elements within a scroll container, you can specify how those elements should align with the container's snap points, ensuring that they appear in the desired position when the container is scrolled. This property accepts values like "start," "center," and "end," allowing developers to control the alignment behavior to optimize the user experience in scrollable interfaces.

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.scrollSnapAlign

Interactive Demo

scroll-snap-align: start;

scroll-snap-align: end;

scroll-snap-align: center;

Scroll »

Syntax

scroll-snap-align: [ none | start | end | center ]{1,2}

Values

noneThe box does not define a snap position in that axis.
startThe start alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.
endThe end alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.
centerThe center alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.

Example

HTML

<div id="container">

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

</div>

CSS

#container {
  width: 80%;
  aspect-ratio: 2/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}

.blue {
  background-color: lightblue;
  height: 95%;
  aspect-ratio: 1/2;
}

.green {
  background-color: lightgreen;
  height: 50%;
  aspect-ratio: 2/1;
}

.blue, .green {
  display: inline-block;
  margin: 5px;
  scroll-snap-align: center;
}

Result

Editor