index.html
und style.css
wurden bereits in der VM bereitgestellt.
Dieser Code erstellt einen scrollbaren Container, der beim Scrollen an Elementen hakt. Um diesen Effekt zu erzielen, werden die folgenden Schritte durchgeführt:
display: grid
und grid-auto-flow: row
werden verwendet, um eine vertikale Layout zu erstellen.
scroll-snap-type: y mandatory
und overscroll-behavior-y: contain
werden verwendet, um den Snap-Effekt beim vertikalen Scroll zu erzeugen.
scroll-snap-align
mit start
, stop
oder center
kann verwendet werden, um die Snap-Ausrichtung zu ändern.
Hier ist der HTML- und CSS-Code:
<div class="vertical-snap">
<a href="#"><img src="https://picsum.photos/id/1067/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/122/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/188/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/249/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/257/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/259/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/283/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/288/640/640" /></a>
<a href="#"><img src="https://picsum.photos/id/299/640/640" /></a>
</div>
.vertical-snap {
margin: 0 auto;
display: grid;
grid-auto-flow: row;
gap: 1rem;
width: calc(180px + 1rem);
padding: 1rem;
height: 480px;
overflow-y: auto;
overscroll-behavior-y: contain;
scroll-snap-type: y mandatory;
}
.vertical-snap > a {
scroll-snap-align: center;
}
.vertical-snap img {
width: 180px;
object-fit: contain;
border-radius: 1rem;
}
Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.