Erstellen von CSS-Karussells

Karussell-Konzepte

Karussells sind ein häufiges Merkmal im Web. Sie haben typischerweise die Form eines scrollbaren Inhaltsbereichs, der mehrere Elemente enthält, wie Präsentationsfolien, Anzeigen, Schlagzeilen oder wichtige Produkteigenschaften.

Benutzer können durch die Elemente navigieren, indem sie Navigationsschaltflächen anklicken oder aktivieren oder wischen. Die Navigation umfasst normalerweise:

Scroll-Schaltflächen

Im Allgemeinen "vorherige" und "nächste" Schaltflächen oder Links.

Scroll-Markierungen

Eine Reihe von Schalt- oder Link-Icons, von denen jedes ein oder mehrere Elemente darstellt, abhängig davon, wie viele Elemente an jeder Scroll-Position im Karussell angezeigt werden.

Ein Hauptmerkmal von Karussells ist die Paginierung — die Elemente wirken wie separate Inhalte, zwischen denen man wechselt, anstatt einen zusammenhängenden Inhaltsbereich zu bilden. Sie könnten ein Element gleichzeitig oder mehrere Elemente auf jeder Karussell-"Seite" anzeigen. Wenn mehrere Elemente sichtbar sind, könnten Sie mit jeder Betätigung der "nächsten" oder "vorherigen" Schaltfläche eine völlig neue Gruppe von Elementen anzeigen. Alternativ könnten Sie ein einzelnes neues Element an einem Ende der Liste hinzufügen, während das Element am anderen Ende aus dem Sichtfeld verschoben wird.

Karussells können recht anfällig und herausfordernd zu implementieren sein, insbesondere mit JavaScript. Sie erfordern Skripte, um Scroll-Markierungen mit den Elementen zu verknüpfen, die sie repräsentieren, während die Scroll-Schaltflächen kontinuierlich aktualisiert werden müssen, damit sie korrekt funktionieren. Wenn Karussells mit JavaScript erstellt werden, muss die Zugänglichkeit des Karussells und der zugehörigen Steuerelemente hinzugefügt werden.

Zum Glück können wir mit den CSS-Karussell-Funktionen zugängliche Karussells mit zugehörigen Steuerelementen ohne den Einsatz von JavaScript erstellen.

CSS-Karussell-Funktionen

Die CSS-Karussell-Funktionen bieten Pseudoelemente und Pseudoklassen, die es ermöglichen, Karussells nur mit CSS und HTML zu erstellen, wobei der Browser den größten Teil des Scrollens und der Verweislinks auf eine zugängliche, flexible und konsistente Weise handhabt. Diese Funktionen sind wie folgt:

::scroll-button()

Generiert in einem scroll container, repräsentieren diese Pseudoelemente Scroll-Schaltflächen, die den Container in eine angegebene Richtung scrollen.

::scroll-marker-group

Innerhalb eines Scroll-Containers generiert; wird verwendet, um Scroll-Markierungen zusammenzufassen und anzuordnen.

::scroll-marker

Wird innerhalb der Kinder eines Vorfahren eines Scroll-Containers oder in den Spalten eines Scroll-Containers generiert, um deren Scroll-Markierungen darzustellen. Diese können ausgewählt werden, um den Container zu ihren zugehörigen Kinder-Elementen oder Spalten zu scrollen, und sie werden innerhalb der ::scroll-marker-group des Scroll-Containers für Layoutzwecke gesammelt.

:target-current

Diese Pseudoklasse kann verwendet werden, um die derzeit aktive Scroll-Markierung auszuwählen. Sie kann verwendet werden, um der derzeit aktiven Markierung einen Hervorhebungsstil zu geben, was wichtig für die Benutzerfreundlichkeit und Zugänglichkeit ist.

::column

Dieses Pseudoelement repräsentiert die einzelnen Spalten, die generiert werden, wenn ein Container darauf eingestellt ist, seinen Inhalt in mehreren Spalten mittels CSS Multi-Column Layout anzuzeigen. Es kann zusammen mit ::scroll-marker verwendet werden, um eine Scroll-Markierung für jede Spalte zu erzeugen.

Karussell mit einzelnen Seiten

Unser erstes Demo ist ein Karussell mit einzelnen Seiten, wobei jedes Element die gesamte Seite einnimmt. Wir haben Scroll-Markierungen als untere Navigation und Scroll-Schaltflächen an den Seiten der Seite, die es dem Benutzer ermöglichen, zu den nächsten und vorherigen Seiten zu wechseln.

Wir verwenden Flexbox, um das Karussell zu layouten, Scrollen-Schnappen, um eine klare Paginierung zu erzwingen, und Ankerpositionierung, um die Scroll-Schaltflächen zu positionieren und Scroll-Markierungen relativ zum Karussell zu positionieren.

Das HTML besteht aus einem Heading-Element und einer ungeordneten Liste, wobei jedes Listenelement einige Beispielinhalte enthält:

<h1>CSS carousel single item per page</h1>
<ul>
  <li>
    <h2>Page 1</h2>
  </li>
  <li>
    <h2>Page 2</h2>
  </li>
  <li>
    <h2>Page 3</h2>
  </li>
  <li>
    <h2>Page 4</h2>
  </li>
</ul>

Karussell-Layout mit Flexbox

Wir verwenden Flexbox, um eine einzelne Reihe von Elementen zu erstellen; das <ul> ist der Flex-Container, und die <li>-Kindlistenelemente werden horizontal angezeigt, wobei jedes Element die volle Breite des Karussells einnimmt.

Die ungeordnete Liste wird so gestaltet, dass sie die volle Breite des Ansichtsfensters mit einer Breite width von 100vw einnimmt; sie erhält auch eine height von 300px und etwas padding. Wir verwenden dann Flexbox, um die Liste anzuordnen – indem wir einen display-Wert von flex festlegen, damit die Kindlistenelemente in einer Reihe angezeigt werden (aufgrund des Standardwertes von flex-direction von row), mit einem gap von 4vw zwischen jedem Element.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

h1 {
  text-align: center;
  font-size: 1.7rem;
}

ul {
  width: 100vw;
  height: 300px;
  padding: 20px;
  display: flex;
  gap: 4vw;
}

Nun ist es an der Zeit, die Listenelemente zu gestalten. Die ersten Deklarationen bieten eine rudimentäre Gestaltung. Die wichtige Deklaration ist der flex-Wert von 0 0 100%, der jedes Element zwingt, so breit wie der Container (das <ul>) zu sein. Infolgedessen wird der Inhalt sein Container überlaufen und das Ansichtsfenster horizontal scrollen.

li {
  list-style-type: none;
  background-color: #eeeeee;
  border: 1px solid #dddddd;
  padding: 20px;

  flex: 0 0 100%;
}

li:nth-child(even) {
  background-color: cyan;
}

Zusätzlich bekommt jedes gerade Listenelement eine andere Hintergrundfarbe über :nth-child(), damit der Scroll-Effekt leichter sichtbar ist.

Einrichten des Scroll-Schnappens auf der Liste

In diesem Abschnitt werden wir einen Overflow-Wert auf der <ul> setzen, um sie in einen scroll container zu verwandeln, und dann CSS scroll snapping anwenden, damit die Liste bei jedem Listenelement mittig einrastet, wenn der Inhalt gescrollt wird.

Ein overflow-x-Wert von scroll wird auf der <ul> gesetzt, sodass ihr Inhalt horizontal innerhalb der Liste scrollt, anstatt das gesamte Ansichtsfenster zu scrollen. CSS scroll snap wird dann verwendet, um auf jede "Seite" zu schnappen — ein scroll-snap-type-Wert von x mandatory wird festgelegt, um die Liste in ein scroll snap container zu verwandeln. Das Schlüsselwort x bewirkt, dass die snap targets des Containers horizontal angeschnappt werden, während das Schlüsselwort mandatory bedeutet, dass der Container am Ende einer Scroll-Aktion immer auf ein Snap-Ziel schnappt.

ul {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

Anschließend wird ein scroll-snap-align-Wert von center auf die Listenelemente gesetzt, sodass, wenn die Liste gescrollt wird, sie zum Zentrum jedes Listenelements schnappt.

li {
  scroll-snap-align: center;
}

Der bisher gezeigte Code wird wie folgt gerendert:

Versuchen Sie, die Liste durch Wischen oder Verwenden der Bildlaufleiste zu scrollen, um den Scroll-Schnapp-Effekt zu sehen. Egal, wo Sie Ihre Scroll-Bewegung beenden, ein Element wird immer an Ort und Stelle "schnappen".

Erstellung von Scroll-Schaltflächen

In diesem Abschnitt fügen wir der Demo die Scroll-Schaltflächen "vorherige" und "nächste" hinzu, um ein Werkzeug zu bieten, mit dem zwischen den Karussellseiten navigiert werden kann. Dies wird unter Verwendung des ::scroll-button() Pseudoelements erreicht.

Die ::scroll-button() Pseudoelemente erzeugen Schaltflächen innerhalb eines Scroll-Containers nur, wenn ihre content-Eigenschaften auf einen anderen Wert als none gesetzt sind. Jedes ::scroll-button() repräsentiert eine Scroll-Schaltfläche, deren Scrollrichtung durch das Argument des Selektors spezifiziert wird. Sie können bis zu vier Scroll-Schaltflächen pro Scroll-Container erzeugen, von denen jede den Inhalt des Containers in Richtung des Starts oder Endes der Block- oder Inline-Achse scrollt.

Sie können auch ein Argument von * angeben, um alle ::scroll-button() Pseudoelemente mit Stilen anzusteuern.

Zuerst werden alle Scroll-Schaltflächen mit einigen rudimentären Stilen sowie Stilen basierend auf verschiedenen Zuständen angesprochen. Es ist wichtig, :focus Stile für Tastaturbenutzer zu setzen. Da Scroll-Schaltflächen automatisch auf disabled gesetzt sind, wenn kein weiteres Scrollen in dieser Richtung möglich ist, verwenden wir die :disabled Pseudoklasse, um diesen Zustand anzusprechen.

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: black;
  opacity: 0.7;
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  opacity: 1;
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}

Als Nächstes wird ein geeignetes Symbol auf den linken und rechten Scroll-Schaltflächen über die content-Eigenschaft gesetzt, was auch die Generierung der Scroll-Schaltflächen verursacht:

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

Positionierung von Scroll-Schaltflächen

Wir haben die Scroll-Schaltflächen erstellt. Jetzt werden wir sie relativ zum Karussell mit CSS Ankerpositionierung positionieren.

Zunächst wird ein Referenz anchor-name auf die Liste gesetzt. Dann wird die position jeder Scroll-Schaltfläche auf absolute gesetzt, und ihre position-anchor-Eigenschaft wird auf denselben Referenznamen gesetzt, der in der Liste definiert ist, um die beiden zu verknüpfen.

ul {
  anchor-name: --my-carousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --my-carousel;
}

Um dort tatsächlich jede Scroll-Schaltfläche zu positionieren, setzen wir Werte auf ihren Inset-Eigenschaften. Wir verwenden anchor()-Funktionen, um die angegebenen Seiten der Schaltflächen relativ zu den Seiten des Karussells zu positionieren. In jedem Fall wird die calc()-Funktion verwendet, um einen Abstand zwischen dem Rand der Schaltfläche und dem Rand des Karussells hinzuzufügen. Zum Beispiel wird der rechte Rand der linken Scroll-Schaltfläche 70 Pixel rechts vom linken Rand des Karussells positioniert.

ul::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);
}

Unter Einbeziehung des Scroll-Schaltflächen-Codes erhalten wir folgendes Ergebnis:

Versuchen Sie, die Scroll-Schaltflächen "vorherige" und "nächste" zu drücken, um zu sehen, wie die Seiten gescrollt werden, wobei das Scroll-Schnappverhalten respektiert wird. Beachten Sie auch, wie die "vorherige" Schaltfläche automatisch deaktiviert wird, wenn die Liste zum Beginn des Inhalts gescrollt wird, während die "nächste" Schaltfläche automatisch deaktiviert wird, wenn die Liste zum Ende des Inhalts gescrollt wird.

Erstellung von Scroll-Markierungen

Scroll-Markierungen sind eine Gruppe von Schaltflächen, von denen jede das Karussell zu einer Position verschiebt, die sich auf eine der Inhaltsseiten bezieht. Sie bieten ein zusätzliches Navigationswerkzeug, das auch Ihren Fortschritt durch die Karussellseiten anzeigt.

In diesem Abschnitt werden wir dem Karussell Scroll-Markierungen hinzufügen, die drei Hauptfunktionen umfassen:

• Die scroll-marker-group-Eigenschaft wird auf das Element des Scroll-Containers gesetzt. Sie muss auf einen Wert ungleich none gesetzt werden, damit das ::scroll-marker-group-Pseudoelement generiert wird; ihr Wert gibt an, wo die Scroll-Markierungsgruppe in der Tab-Reihenfolge und Layout-Box-Reihenfolge (aber nicht in der DOM-Struktur) des Karussells erscheint — before setzt es an den Anfang, vor den Scroll-Schaltflächen, während after es am Ende platziert.
• Das ::scroll-marker-group-Pseudoelement existiert innerhalb eines Scroll-Containers und wird verwendet, um Scroll-Markierungen zusammenzufassen, zu enthalten und als ganze Gruppe anzuordnen.
• ::scroll-marker-Pseudoelemente existieren innerhalb der Kinder und ::column-Fragmente eines Scroll-Container-Vorfahren und repräsentieren deren Scroll-Markierungen. Diese werden innerhalb des Vorfahren's ::scroll-marker-group für Layout-Zwecke gesammelt.

Zuerst wird die scroll-marker-group-Eigenschaft der Liste auf after gesetzt, sodass das ::scroll-marker-group-Pseudoelement nach dem DOM-Inhalt der Liste in der Fokus- und Layout-Box-Reihenfolge platziert wird; das bedeutet, es kommt nach den Scroll-Schaltflächen:

ul {
  scroll-marker-group: after;
}

Als Nächstes wird das ::scroll-marker-group-Pseudoelement der Liste relativ zum Karussell unter Verwendung der CSS-Ankerpositionierung positioniert, ähnlich derer der Scroll-Schaltfläche, außer dass es horizontal am Karussell mit einem justify-self-Wert von anchor-center zentriert wird. Die Gruppe wird mit Flexbox angeordnet, mit einem justify-content-Wert von center und einem gap von 20px, sodass ihre Kinder (die ::scroll-marker-Pseudoelemente) innerhalb der ::scroll-marker-group zentriert mit einem Abstand zwischen jedem von ihnen sind.

ul::scroll-marker-group {
  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;

  display: flex;
  justify-content: center;
  gap: 20px;
}

Als Nächstes kümmern wir uns um das Aussehen und Gefühl der Scroll-Markierungen selbst; sie können genauso wie andere generierte Inhalte gestylt werden. Es ist wichtig zu beachten, dass wir einen Wert ungleich none für die content-Eigenschaft setzen müssen, damit die Scroll-Markierungen tatsächlich generiert werden. Wir setzen auch einige rudimentäre Stile, um die Markierungen als umrandete Kreise erscheinen zu lassen:

li::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
}

Schließlich für diesen Abschnitt wird die :target-current-Pseudoklasse verwendet, um die Scroll-Markierung auszuwählen, die der derzeit sichtbaren "Seite" entspricht, und wie weit der Benutzer durch den betreffenden Inhalt gescrollt hat. In diesem Fall setzen wir die background-color auf black, sodass sie als ausgefüllter Kreis gestylt ist.

li::scroll-marker:target-current {
  background-color: black;
}

Endergebnis des Karussells mit Einzelseiten

Der gesamte oben stehende Code kombiniert ergibt folgendes Ergebnis:

Seit dem vorherigen Live-Beispiel wurden die Scroll-Markierungen hinzugefügt — versuchen Sie sie zu drücken, um direkt zu jeder Seite zu springen. Beachten Sie, wie der aktuelle Marker hervorgehoben ist, sodass Sie sehen können, wo Sie sich in der Seitennummerierung befinden. Versuchen Sie auch, zur Scroll-Markierungsgruppe zu tabben, und verwenden Sie dann die Pfeiltasten, um durch jede Seite zu wechseln.

Sie können auch zwischen den Seiten navigieren, indem Sie nach links und rechts wischen, die Bildlaufleiste ziehen oder die Scroll-Schaltflächen drücken.

Responsives Karussell: Mehrere Elemente pro Seite

Das zweite Demo ist ein Karussell mit mehreren Elementen pro Seite, das erneut Scroll-Schaltflächen und Scroll-Markierungen für die Navigation durch die Seiten enthält. Dieses Demo ist auch responsiv — es erscheinen unterschiedliche Anzahl von Elementen auf jeder Seite, abhängig von der Breite des Ansichtsfensters.

Dieses Demo ist sehr ähnlich wie das Karussell mit Einzelseiten-Demo, mit der Ausnahme, dass es anstelle von Flexbox zum Layout CSS Multi-Column Layout und das ::column-Pseudoelement verwendet, um beliebige Spalten zu erstellen, die die volle Breite des Karussells einnehmen und möglicherweise mehrere Elemente enthalten können.

Mit diesem Ansatz können wir sicherstellen, dass, wenn das Ansichtsfenster wächst oder schrumpft, während die Elementgröße konstant bleibt, niemals ein teilweise sichtbares Element am Rand des Scrollports angezeigt wird. In diesem Fall werden die Scroll-Markierungen auf Scroll-Container-Fragmenten pro Spalte erstellt, anstatt auf den Kindern pro Element.

Das HTML ist dem des vorherigen Demos sehr ähnlich, mit der Ausnahme, dass es deutlich mehr Listenelemente gibt und, da jetzt mehrere Elemente gleichzeitig sichtbar sind, wir sie als Elemente anstelle von Seiten bezeichnen:

...
  <li>
    <h2>Item 1</h2>
  </li>
...

Dieses Demo hat auch sehr ähnliche CSS, mit der Ausnahme der in den folgenden Abschnitten erklärten Regeln.

<h1>CSS carousel multiple items per page</h1>
<ul>
  <li>
    <h2>Item 1</h2>
  </li>
  <li>
    <h2>Item 2</h2>
  </li>
  <li>
    <h2>Item 3</h2>
  </li>
  <li>
    <h2>Item 4</h2>
  </li>
  <li>
    <h2>Item 5</h2>
  </li>
  <li>
    <h2>Item 6</h2>
  </li>
  <li>
    <h2>Item 7</h2>
  </li>
  <li>
    <h2>Item 8</h2>
  </li>
  <li>
    <h2>Item 9</h2>
  </li>
  <li>
    <h2>Item 10</h2>
  </li>
  <li>
    <h2>Item 11</h2>
  </li>
  <li>
    <h2>Item 12</h2>
  </li>
  <li>
    <h2>Item 13</h2>
  </li>
  <li>
    <h2>Item 14</h2>
  </li>
  <li>
    <h2>Item 15</h2>
  </li>
</ul>

Karussell-Layout mit Spalten

Dieses Beispiel verwendet CSS Multi-Column Layout anstelle von Flexbox, um die Karussellelemente zu layouten. Der columns-Wert von 1 erzwingt, dass jede Spalte die volle Breite des Containers hat, wobei der Inhalt jeweils eine einzelne Spalte anzeigt. Ein text-align-Wert von center wird ebenfalls angewendet, um den Inhalt mit der Mitte der Liste zu zentrieren.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

h1 {
  text-align: center;
  font-size: 1.7rem;
}

ul {
  width: 100vw;
  height: 300px;
  padding: 10px;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  columns: 1;
  text-align: center;
}

Wir bieten eine grundlegende Box-Gestaltung für die Listenelemente, dann wenden wir Layout-Stile an, um ein oder mehrere Elemente in die einzelne Inhalts-Spalte zu passen, abhängig von der Ansichtsfensterbreite. Die Anzahl ändert sich dynamisch, während die Liste breiter oder schmaler wird.

li {
  list-style-type: none;

  display: inline-block;
  height: 100%;
  width: 200px;

  background-color: #eeeeee;
  border: 1px solid #dddddd;
  padding: 20px;
  margin: 0 10px;

  text-align: left;
}

li:nth-child(even) {
  background-color: cyan;
}

Die wesentlichen Layout-Eigenschaften sind wie folgt:

• Ein display-Wert von inline-block wurde gesetzt, um die Listenelemente dazu zu zwingen, sich nebeneinander zu setzen und die Liste horizontal scrollen zu lassen.
• Eine absolute width von 200px wurde auf ihnen gesetzt, um ihre Größe zu steuern, sodass ein oder mehrere in eine Spalte passen, die mit der Breite des Ansichtsfensters wächst und schrumpft.
• Ein text-align-Wert von left wird auf sie gesetzt, um das text-align: center zu überschreiben, das auf den Elterncontainer gesetzt wurde, damit der Elementinhalt linksbündig ausgerichtet ist.

Die scroll-snap-align-Eigenschaft wird jetzt auf den ::column-Pseudoelementen gesetzt — die die Inhaltsspalten repräsentieren, die durch die columns-Eigenschaft generiert werden — anstelle der Listenelemente. Wir möchten auf jede vollständige Spalte schnappen, anstatt jedes einzelne Listenelement, und bei jeder Scroll-Aktion alle neuen Items anzeigen.

ul::column {
  scroll-snap-align: center;
}

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: black;
  opacity: 0.7;
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  opacity: 1;
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  opacity: 0.2;
  cursor: unset;
}

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

ul {
  anchor-name: --my-carousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --my-carousel;
}

ul::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul {
  scroll-marker-group: after;
}

ul::scroll-marker-group {
  position: absolute;
  position-anchor: --my-carousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

Spalten-Scroll-Markierungen

Das CSS zur Erstellung der Scroll-Markierungen in diesem Demo ist nahezu identisch mit dem im vorherigen Demo, außer dass die Selektoren anders sind — die Scroll-Markierungen werden auf den generierten ::column-Pseudoelementen statt auf den Listenelementen erstellt. Beachten Sie, dass wir hier zwei Pseudoelemente hinzufügen, um Scroll-Markierungen auf den generierten Spalten zu erzeugen.

ul::column::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 10px;
}

ul::column::scroll-marker:target-current {
  background-color: black;
}

Endergebnis des responsiven Karussells

Das Responsive-Karussell wird wie folgt gerendert:

Versuchen Sie zwischen den verschiedenen Seiten zu navigieren, indem Sie links und rechts wischen, die Bildlaufleiste verwenden, die Scroll-Schaltflächen drücken und die Scroll-Markierungen betätigen. Die Funktionalität ist ähnlich dem Einzelseiten-Flexbox-Beispiel, außer dass jetzt mehrere Listenelemente in jeder navigierten Position sind; die Scroll-Markierungen werden auf Spaltenfragmenten gesetzt, die möglicherweise mehrere Elemente enthalten, anstatt auf jedem Element.

Versuchen Sie auch, die Bildschirmbreite zu ändern, und Sie werden sehen, dass sich die Anzahl der Listenelemente, die in die Liste passen, ändern — und daher auch die Anzahl der generierten Spalten. Da sich die Anzahl der Spalten ändert, aktualisiert sich die Anzahl der Scroll-Markierungen dynamisch, sodass jede Spalte in der Scroll-Markierungsgruppe dargestellt wird.

Siehe auch

• CSS Overflow-Modul
• CSS Anchor Positioning-Modul
• CSS Scroll Snap-Modul
• CSS Carousel Gallery auf chrome.dev (2025)