CSS Scroll Snap - Bilder am Layout einrasten

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>