CSS - scroll-snap-type Property

CSS scroll-snap-type property specifies how the scroll container snaps to snap positions.

To use the scroll-snap-type property, you need to set it on the scroll container. You also need to set the scroll-snap-align property on the elements that you want to snap into place.

Possible Values

  • none − The scroll container will not snap to any positions.

  • x − This value is used for horizontal scrolling.

  • y − This value is used for vertical scrolling.

  • block − This makes the scroll container stop at the nearest snap point on the block axis.

  • inline − This makes the scroll container stop at the nearest snap point on the inline axis.

  • both − It specify that scrolling should snap both horizontally and vertically within a scroll container.

  • mandatory − The scroll container should snap to the nearest snap point, making it mandatory for the user to scroll to a specific position.

  • proximity − The scroll container should snap to the nearest snap point based on proximity.

Applies to

All the HTML elements.

DOM Syntax

object.style.scrollSnapType = "none|x|y|block|inline|both|mandatory|proximity";

CSS Scroll Snap Type - None Value

The following example demostrate the use of scroll-snap-type: none property −

<html>
<head>
<style>
   .scroll-container {
      display: flex;
      width: 350px;
      height: 200px;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      scroll-snap-type: none;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      flex: 0 0 auto;
      width: 320px;
      height: 200px;
      scroll-snap-align: center;
   }
   .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-type: none</div>
      <div class="scrolling-section2">scroll-snap-type: none</div>
      <div class="scrolling-section3">scroll-snap-type: none</div>
      <div class="scrolling-section1">scroll-snap-type: none</div>
   </div>
</body>
</html>

CSS Scroll Snap Type - X and Y mandatory Value

The following example demonstrates how to use the scroll-snap-type: x mandatory and scroll-snap-type: y mandatory will make the scroll container stop at the nearest snap point on both the X-axis and the Y-axis, even if you scroll quickly −

<html>
<head>
<style>
   .scroll-container1 {
      display: flex;
      width: 350px;
      height: 200px;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      scroll-snap-type: x mandatory;
      margin-bottom: 20px;
   }
   .scroll-container2 {
      width: 350px;
      height: 200px;
      overflow-y: scroll;
      overflow-x: hidden;
      white-space: nowrap;
      scroll-snap-type: y mandatory;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      flex: 0 0 auto;
      width: 320px;
      height: 200px;
      scroll-snap-align: center;
   }
   .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-container1">
      <div class="scrolling-section1">scroll-snap-type: x mandatory</div>
      <div class="scrolling-section2">scroll-snap-type: x mandatory</div>
      <div class="scrolling-section3">scroll-snap-type: x mandatory</div>
      <div class="scrolling-section1">scroll-snap-type: x mandatory</div>
   </div>
   <div class="scroll-container2">
      <div class="scrolling-section1">scroll-snap-type: y mandatory</div>
      <div class="scrolling-section2">scroll-snap-type: y mandatory</div>
      <div class="scrolling-section3">scroll-snap-type: y mandatory</div>
      <div class="scrolling-section1">scroll-snap-type: y mandatory</div>
   </div>
</body>
</html>

CSS Scroll Snap Type - X and Y proximity Value

The following example demostrates how to use the scroll-snap-type: x proximity and scroll-snap-type: y proximity properties to create scrolling containers where the sections snap into place as you scroll horizontally and vertically −

<html>
<head>
<style>
   .scroll-container1 {
      display: flex;
      width: 350px;
      height: 200px;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      scroll-snap-type: x proximity;
      margin-bottom: 20px;
   }
   .scroll-container2 {
      width: 350px;
      height: 200px;
      overflow-y: scroll;
      overflow-x: hidden;
      white-space: nowrap;
      scroll-snap-type: y proximity;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      flex: 0 0 auto;
      width: 300px;
      height: 200px;
      scroll-snap-align: center;
   }
   .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-container1">
      <div class="scrolling-section1">scroll-snap-type: x proximity</div>
      <div class="scrolling-section2">scroll-snap-type: x proximity</div>
      <div class="scrolling-section3">scroll-snap-type: x proximity</div>
      <div class="scrolling-section1">scroll-snap-type: x proximity</div>
   </div>
   <div class="scroll-container2">
      <div class="scrolling-section1">scroll-snap-type: y proximity</div>
      <div class="scrolling-section2">scroll-snap-type: y proximity</div>
      <div class="scrolling-section3">scroll-snap-type: y proximity</div>
      <div class="scrolling-section1">scroll-snap-type: y proximity</div>
   </div>
</body>
</html>

CSS Scroll Snap Type - Both Value

The following example demonstrates the scroll-snap-type: both property will stop the scroll container at the nearest snap point on both horizontally and vertically −

<html>
<head>
<style>
   .scroll-container {
      display: flex;
      width: 350px;
      height: 200px;
      overflow-x: scroll;
      overflow-y: scroll;
      white-space: nowrap;
      scroll-snap-type: both;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      flex: 0 0 auto;
      width: 320px;
      height: 200px;
      scroll-snap-align: center;
   }
   .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-type: both</div>
      <div class="scrolling-section2">scroll-snap-type: both</div>
      <div class="scrolling-section3">scroll-snap-type: both</div>
      <div class="scrolling-section1">scroll-snap-type: both</div>
   </div>
</body>
</html>

CSS Scroll Snap Type - RTL AND LTR Directions

The following example demostrates how to use the scroll-snap-type property to create scrolling containers with snap points in both directions right-to-left (RTL) and left-to-right (LTR) −

<html>
<head>
<style>
   .scroll-container1 {
      display: flex;
      width: 350px;
      height: 150px;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      scroll-snap-type: x mandatory;
      margin-bottom: 20px;
   }
   .scroll-container2 {
      width: 350px;
      height: 150px;
      overflow-y: scroll;
      overflow-x: hidden;
      white-space: nowrap;
      scroll-snap-type: y mandatory;
      margin-bottom: 20px;
   }
   .scroll-container3 {
      display: flex;
      width: 350px;
      height: 150px;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      scroll-snap-type: x proximity;
      margin-bottom: 20px;
   }
   .scroll-container4 {
      width: 350px;
      height: 150px;
      overflow-y: scroll;
      overflow-x: hidden;
      white-space: nowrap;
      scroll-snap-type: y proximity;
      margin-bottom: 20px;
   }
   .scrolling-section1,
   .scrolling-section2,
   .scrolling-section3 {
      flex: 0 0 auto;
      width: 320px;
      height: 150px;
      scroll-snap-align: center;
   }
   .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-container1" dir="ltr">
      <div class="scrolling-section1">scroll-snap-type: x mandatory with ltr</div>
      <div class="scrolling-section2">scroll-snap-type: x mandatory with ltr</div>
      <div class="scrolling-section3">scroll-snap-type: x mandatory with ltr</div>
      <div class="scrolling-section1">scroll-snap-type: x mandatory with ltr</div>
   </div>
   <div class="scroll-container2" dir="ltr">
      <div class="scrolling-section1">scroll-snap-type: y mandatory with ltr</div>
      <div class="scrolling-section2">scroll-snap-type: y mandatory with ltr</div>
      <div class="scrolling-section3">scroll-snap-type: y mandatory with ltr</div>
      <div class="scrolling-section1">scroll-snap-type: y mandatory with ltr</div>
   </div>
   <div class="scroll-container3" dir="ltr">
      <div class="scrolling-section1">scroll-snap-type: x proximity with ltr</div>
      <div class="scrolling-section2">scroll-snap-type: x proximity with ltr</div>
      <div class="scrolling-section3">scroll-snap-type: x proximity with ltr</div>
      <div class="scrolling-section1">scroll-snap-type: x proximity with ltr</div>
   </div>
   <div class="scroll-container4" dir="ltr">
      <div class="scrolling-section1">scroll-snap-type: y proximity with ltr</div>
      <div class="scrolling-section2">scroll-snap-type: y proximity with ltr</div>
      <div class="scrolling-section3">scroll-snap-type: y proximity with ltr</div>
      <div class="scrolling-section1">scroll-snap-type: y proximity with ltr</div>
   </div>
   <div class="scroll-container1" dir="rtl">
      <div class="scrolling-section1">scroll-snap-type: x mandatory with rtl</div>
      <div class="scrolling-section2">scroll-snap-type: x mandatory with rtl</div>
      <div class="scrolling-section3">scroll-snap-type: x mandatory with rtl</div>
      <div class="scrolling-section1">scroll-snap-type: x mandatory with rtl</div>
   </div>
   <div class="scroll-container2" dir="rtl">
      <div class="scrolling-section1">scroll-snap-type: y mandatory with rtl</div>
      <div class="scrolling-section2">scroll-snap-type: y mandatory with rtl</div>
      <div class="scrolling-section3">scroll-snap-type: y mandatory with rtl</div>
      <div class="scrolling-section1">scroll-snap-type: y mandatory with rtl</div>
   </div>
   <div class="scroll-container3" dir="rtl">
      <div class="scrolling-section1">scroll-snap-type: x proximity with rtl</div>
      <div class="scrolling-section2">scroll-snap-type: x proximity with rtl</div>
      <div class="scrolling-section3">scroll-snap-type: x proximity with rtl</div>
      <div class="scrolling-section1">scroll-snap-type: x proximity with rtl</div>
   </div>
   <div class="scroll-container4" dir="rtl">
      <div class="scrolling-section1">scroll-snap-type: y proximity with rtl</div>
      <div class="scrolling-section2">scroll-snap-type: y proximity with rtl</div>
      <div class="scrolling-section3">scroll-snap-type: y proximity with rtl</div>
      <div class="scrolling-section1">scroll-snap-type: y proximity with rtl</div>
   </div>
</body>
</html>
Advertisements