CSS - scroll-snap-stop Property
CSS scroll-snap-stop property determines whether the scroll container will scroll past or stick to the nearest snap positions.
Possible Values
-
normal − Default value. The scroll container will scroll past snap points without stopping.
-
always − This value force the scroll container to stop at every snap position, even when you scroll quickly past them.
Applies to
All the HTML elements.
DOM Syntax
object.style.scrollSnapStop = "normal|always";
CSS Scroll Snap Stop - Normal Value
The following example demonstrates how to use the scroll-snap-stop: normal property −
<html> <head> <style> .scroll-container { display: flex; width: 350px; height: 200px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scroll-snap-type: x mandatory; } .scrolling-section1, .scrolling-section2, .scrolling-section3 { flex: 0 0 auto; width: 300px; height: 200px; scroll-snap-align: center; scroll-snap-stop: normal; } .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-stop: normal</div> <div class="scrolling-section2">scroll-snap-stop: normal</div> <div class="scrolling-section3">scroll-snap-stop: normal</div> <div class="scrolling-section1">scroll-snap-stop: normal</div> </div> </body> </html>
CSS Scroll Snap Stop - Always Value
The following example demonstrates how to use the scroll-snap-stop: always property to stop the scrolling at the specified snap points −
<html> <head> <style> .scroll-container { display: flex; width: 350px; height: 200px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scroll-snap-type: x mandatory; } .scrolling-section1, .scrolling-section2, .scrolling-section3 { flex: 0 0 auto; width: 300px; height: 200px; scroll-snap-align: center; 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); } </style> </head> <body> <div class="scroll-container"> <div class="scrolling-section1">scroll-snap-stop: always</div> <div class="scrolling-section2">scroll-snap-stop: always</div> <div class="scrolling-section3">scroll-snap-stop: always</div> <div class="scrolling-section1">scroll-snap-stop: always</div> </div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google