index.html
und style.css
wurden bereits in der VM bereitgestellt.
Um einen horizontal scrollbaren Container zu erstellen, der beim Scrollen an Elementen anhaften wird, folgen Sie diesen Schritten:
- Verwenden Sie
display: grid
und grid-auto-flow: column
, um ein horizontales Layout zu erstellen.
- Verwenden Sie
scroll-snap-type: x mandatory
und overscroll-behavior-x: contain
, um einen Snap-Effekt beim horizontalen Scroll zu erzeugen.
- Ändern Sie
scroll-snap-align
in start
, stop
oder center
, um die Snap-Ausrichtung anzupassen.
Hier ist ein Beispiel für HTML- und CSS-Code, den Sie verwenden können:
HTML
<div class="horizontal-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>
CSS
.horizontal-snap {
display: grid;
grid-auto-flow: column;
gap: 1rem;
height: calc(180px + 1rem);
padding: 1rem;
max-width: 480px;
margin: 0 auto;
overflow-y: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
}
.horizontal-snap > a {
scroll-snap-align: center;
}
.horizontal-snap img {
width: 180px;
max-width: none;
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.