CSS - scroll-snap-align Property

CSS scroll-snap-align property specifies how a snapped element is positioned within its snap container. It takes two values, the first for the block axis and the second for the inline axis.

Possible Values

  • none − The snapped element is not aligned to the snap container's snapport.

  • start − The snapped element's snap point is aligned to the start of the snap container's snapport.

  • end − The snapped element's snap point is aligned to the end of the snap container's snapport.

  • center − The snapped element's snap point is aligned to the center of the snap container's snapport.

The snapport is the area of the scroll container to which the snap areas are aligned.

Applies to

All the HTML elements.

DOM Syntax

object.style.scrollSnapAlign = "none|start|end|center";

CSS Scroll Snap Align - None Value

The following example demonstrates of how to use the scroll-snap-align: none property −

<html>
<head>
<style>
   .scroll-container {
      display: flex;
      width: 350px;
      height: 200px;
      overflow-x: auto;
      overflow-y: hidden;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3
   {
      flex: 0 0 auto;
      width: 300px;
      height: 200px;
      scroll-snap-align: none;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
   }
   .scrolling-section3 {
      background-color: rgb(176, 229, 238);
   }
</style>
</head>
<body>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-snap-align: none</div>
      <div class="scrolling-section2">scroll-snap-align: none</div>
      <div class="scrolling-section3">scroll-snap-align: none</div>
   </div>
</body>
</html>

CSS Scroll Snap Align - Start Value

The following example demonstrates of how to use the scroll-snap-align: start property −

<html>
<head>
<style>
   .scroll-container {
      display: flex;
      width: 350px;
      height: 200px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      flex: 0 0 auto;
      width: 300px;
      height: 200px;
      scroll-snap-stop: always;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
      scroll-snap-align: start;
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
   }
   .scrolling-section3 {
      background-color: rgb(176, 229, 238);   
   }
</style>
</head>
<body>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-snap-align: start</div>
      <div class="scrolling-section2">scroll-snap-align</div>
      <div class="scrolling-section3">scroll-snap-align</div>
   </div>
</body>
</html>

CSS Scroll Snap Align - Center Value

The following example demonstrates of how to use the scroll-snap-align: center property −

<html>
<head>
<style>
   .scroll-container {
      display: flex;
      width: 350px;
      height: 200px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      flex: 0 0 auto;
      width: 300px;
      height: 200px;
      scroll-snap-stop: always;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
      scroll-snap-align: center;
   }
   .scrolling-section3 {
      background-color: rgb(176, 229, 238);  
   }
</style>
</head>
<body>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-snap-align</div>
      <div class="scrolling-section2">scroll-snap-align: center</div>
      <div class="scrolling-section3">scroll-snap-align</div>
   </div>
</body>
</html>

CSS Scroll Snap Align - End Value

The following example demonstrates of how to use the scroll-snap-align: end property −

<html>
<head>
<style>
   .scroll-container {
      display: flex;
      width: 350px;
      height: 200px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3
   {
      flex: 0 0 auto;
      width: 300px;
      height: 200px;
      scroll-snap-stop: always;
   }
   .scrolling-section1 {
      background-color: rgb(220, 235, 153);
   }
   .scrolling-section2 {
      background-color: rgb(230, 173, 218);
   }
   .scrolling-section3 {
      background-color: rgb(176, 229, 238); 
      scroll-snap-align: end; 
   }
</style>
</head>
<body>
   <div class="scroll-container">
      <div class="scrolling-section1">scroll-snap-align</div>
      <div class="scrolling-section2">scroll-snap-align</div>
      <div class="scrolling-section3">scroll-snap-align: end</div>
   </div>
</body>
</html>
Advertisements