+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: Scroll snap in CSS3 (/showthread.php?tid=5182)
Scroll snap in CSS3 - Qomplainerz - 07-26-2023
Example:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Snap Example</title>
<style>
/* Create a scroll snap effect for the image container */
.image-container {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.image {
flex: 0 0 100%;
scroll-snap-align: center;
}
</style>
</head>
<body>
<div class="image-container">
<img class="image" src="image1.jpg" alt="Image 1">
<img class="image" src="image2.jpg" alt="Image 2">
<img class="image" src="image3.jpg" alt="Image 3">
</div>
</body>
</html>
Explanation:
Scroll snap allows you to create a smooth scrolling experience with snap points. In this example, the .image-container is set to overflow-x: scroll to enable horizontal scrolling. The scroll-snap-type: x mandatory property ensures that images will snap to the container when scrolling. The images within the container, represented by the .image class, are aligned to the center of the container when snapping occurs.