CSS scroll-snap-align Property

Code Examples

A basic horizontal slider where each item snaps to the center of the container view.

<style>
.container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 300px;
  border: 2px solid #333333;
}
.item {
  flex: 0 0 100%;
  height: 200px;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #ffffff;
}
.item:nth-child(odd) { background-color: #ff5722; }
.item:nth-child(even) { background-color: #00bcd4; }
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

An advanced vertical scroll layout using sections that snap to the start, with a JavaScript snippet showing how to manipulate alignment dynamically.

<style>
.scroll-box {
  height: 400px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  border: 5px solid #222222;
}
section {
  height: 400px;
  scroll-snap-align: start;
  padding: 20px;
  box-sizing: border-box;
}
#sec1 { background: #eeeeee; }
#sec2 { background: #dddddd; }
#sec3 { background: #cccccc; }
</style>
<div class="scroll-box" id="scroller">
  <section id="sec1"><h1>Section 1</h1></section>
  <section id="sec2"><h1>Section 2</h1></section>
  <section id="sec3"><h1>Section 3</h1></section>
</div>
<script>
const scroller = document.getElementById("scroller");
// Dynamically change snap alignment via JS
// This would change all sections to snap to center instead of start
const sections = scroller.querySelectorAll("section");
sections.forEach(s => {
  s.style.scrollSnapAlign = "center";
});
</script>

Pro Tip

You can use scroll-margin on the child elements to create a gap between the snap point and the edge of the container. This is great for keeping some breathing room or 'white space' around your snapped elements without messing up your actual layout padding.