CSS Scroll Snap - Bilder am Layout einrasten
![[Bildschirmfoto]
CSS Scroll Snap - Bilder am Layout einrasten [Bildschirmfoto]
CSS Scroll Snap - Bilder am Layout einrasten](img/scroll_snap.png)
Mit Hilfe der Scroll Snap-Technik von CSS kann man steuern, dass der Browser an bestimmten Stellen im Layout einrastet, wenn über diese Punkte hinweg gescrollt werden soll.










<style>
div#slider {
width: 620px;
height: 400px;
overflow-y: auto;
overflow-x: hidden;
margin: auto;
scroll-snap-type: y mandatory;
}
.item {
scroll-snap-align: start;
}
.item > img {
width: 600px;
height: 400px;
}
</style>
<div id="slider">
<div class="item"> <img src="img/1.jpg"> </div>
<div class="item"> <img src="img/2.jpg"> </div>
<div class="item"> <img src="img/3.jpg"> </div>
<div class="item"> <img src="img/4.jpg"> </div>
<div class="item"> <img src="img/5.jpg"> </div>
<div class="item"> <img src="img/6.jpg"> </div>
<div class="item"> <img src="img/7.jpg"> </div>
<div class="item"> <img src="img/8.jpg"> </div>
</div>