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>
To Continue Learning Please Login
Login with Google