CSS - Overscroll-Verhalten: Ein Leitfaden für Anfänger

Hallo da draußen, zukünftige CSS-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt des CSS-Overscroll-Verhaltens. Machen Sie sich keine Sorgen, wenn Sie noch nie eine Zeile Code geschrieben haben – ich werde Ihr freundlicher Guide sein, und wir werden dieses Thema gemeinsam Schritt für Schritt erkunden. Also packen Sie Ihren virtuellen Rucksack, und tauchen wir ein!

Was ist Overscroll-Verhalten?

Bevor wir ins Detail gehen, lassen Sie uns verstehen, was Overscroll-Verhalten ist. Haben Sie jemals auf Ihrem Handy eine Webseite durchgescrollt und am Ende erreicht, wo es diese federnde Sache macht? Das ist Overscroll in Aktion! Es ist wie wenn Sie ein Buch lesen und versuchen, eine Seite nach der letzten umzublättern – da gibt es diesen kleinen Widerstand. CSS overscroll-behavior ermöglicht es uns, zu steuern, wie eine Webseite sich in diesen Situationen verhält.

Mögliche Werte und Syntax

Nun schauen wir uns die verschiedenen Werte an, die wir mit overscroll-behavior verwenden können und wie wir sie in unserem CSS写出. Hier ist eine praktische Tabelle zur Zusammenfassung:

Wert	Beschreibung
auto	Standardverhalten - ermöglicht das "Überlaufen" zum nächsten Element
contain	Verhindert Scroll-Verkettung, aber ermöglicht federnde Effekte
none	Verhindert sowohl Scroll-Verkettung als auch federnde Effekte

Die grundlegende Syntax sieht so aus:

element {
overscroll-behavior: value;
}

Lassen Sie uns dies mit einigen Beispielen erläutern!

Beispiel 1: Standardverhalten (auto)

body {
overscroll-behavior: auto;
}

Dies ist die Standard-Einstellung. Es ist wie ein Buch auf dem Tisch liegen zu lassen – es verhält sich so, wie Sie es erwarten würden, mit normalem Scrollen und Federn.

Beispiel 2: Scroll enthalten

.scrollable-element {
overscroll-behavior: contain;
}

Stellen Sie sich vor, Sie haben eine scrollbare Division auf Ihrer Webseite. Mit 'contain' ist es so, als hätten Sie ein Lesezeichen am Ende eines Kapitels gesetzt. Sie können immer noch die Seiten innerhalb dieses Kapitels umblättern (Federeffekt), aber Sie blättern nicht versehentlich ins nächste Kapitel (verhindert Scroll-Verkettung).

Beispiel 3: Keine Overscroll-Effekte

.modal {
overscroll-behavior: none;
}

Das ist wie das Zusammenkleben der Seiten Ihres Buches am Ende. Kein mehr Blättern oder Federn – es stoppt einfach.

Anwendungsbereich

Nun könnte sich die Frage stellen, "Wo kann ich diese coole Eigenschaft verwenden?" Nun, sie gilt für alle Elemente, aber ist besonders nützlich auf:

1. Dem body-Element
2. Scrollbaren Containern (wie eine Division mit overflow: scroll)

CSS overscroll-behavior - Vergleich der Werte

Lassen Sie uns diese Werte mit einem realen Szenario vergleichen. Stellen Sie sich vor, Sie gestalten eine Webseite mit einer scrollbaren Seitenleiste und einem Hauptinhaltbereich.

<div class="sidebar">
<!-- Seitenleisten-Inhalt -->
</div>
<div class="main-content">
<!-- Hauptinhalt -->
</div>

.sidebar {
height: 100vh;
overflow-y: scroll;
overscroll-behavior: contain;
}

.main-content {
overscroll-behavior: auto;
}

In diesem Beispiel hat die Seitenleiste ihre eigeneScrollverhalten contained, während der Hauptinhalt sich normal verhält. Es ist wie ein Mini-Buch (Seitenleiste) innerhalb Ihres Hauptbuchs (Webseite) – Sie können durch das Mini-Buch blättern, ohne das Hauptbuch zu beeinflussen.

CSS overscroll-behavior - Zwei Schlüsselwortwerte

Wussten Sie, dass Sie mit overscroll-behavior zwei Werte verwenden können? Es ist wie separate Anweisungen für vertikales und horizontales Scrollen zu geben.

element {
overscroll-behavior: vertical-value horizontal-value;
}

Zum Beispiel:

.custom-scroll {
overscroll-behavior: contain auto;
}

Dies tells dem Browser, vertikales Overscroll zu contain, aber normales Verhalten für horizontales Overscroll zu erlauben. Es ist wie ein Buch, bei dem Sie nicht über dasletzte Blatt hinausblättern können, aber Sie können es seitlich drehen!

CSS overscroll-behavior - Verwandte Eigenschaften

Overscroll-behavior hat einige Verwandte in der CSS-Familie. Lassen Sie uns sie kennenlernen:

1. overscroll-behavior-x: Steuert das horizontale Overscroll-Verhalten
2. overscroll-behavior-y: Steuert das vertikale Overscroll-Verhalten

Diese sind wie die spezialisierten Werkzeuge in Ihrer CSS-Werkzeugkiste. Wenn Sie präzise Kontrolle benötigen, sind diese Ihre goto-Eigenschaften.

.horizontal-scroll {
overscroll-behavior-x: contain;
}

.vertical-scroll {
overscroll-behavior-y: none;
}

In diesem Beispiel containen wir horizontales Overscroll, aber verhindern completely vertikales Overscroll. Es ist wie ein Panoramabildband, bei dem Sie seitlich scrollen können, aber nicht nach oben und unten!

Praktische Anwendung: Ein Modal-Beispiel

Lassen Sie uns all dieses Wissen in einer realen Weltanwendung verwenden – ein Modal-Fenster.

<div class="page-content">
<!-- Ihr Hauptseiteninhalt hier -->
</div>
<div class="modal">
<div class="modal-content">
<!-- Ihr Modal-Inhalt hier -->
</div>
</div>

.page-content {
height: 2000px; /* Langer Inhalt, um Scrollen zu ermöglichen */
}

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
overscroll-behavior: contain;
}

.modal-content {
background-color: white;
padding: 20px;
max-height: 80vh;
overflow-y: auto;
overscroll-behavior: contain;
}

In diesem Beispiel haben wir ein Modal erstellt, das den Hauptinhalt überlagert. Durch das Setzen von overscroll-behavior: contain sowohl auf das Modal als auch auf seinen Inhalt stellen wir sicher, dass das Scrollen im Modal nicht den Hauptinhalt beeinflusst und jeder Overscroll im Modal enthalten bleibt.

Fazit

Und da haben Sie es, meine lieben Schüler! Wir haben die Welt des CSS-Overscroll-Verhaltens durchquert, von seinen Grundlagen bis zu praktischen Anwendungen. Denken Sie daran, wie jedes gute Buch, das Beherrschen von CSS erfordert Zeit und Übung. Haben Sie keine Angst, zu experimentieren und Fehler zu machen – das ist, wie wir lernen und wachsen.

Bei Ihrer Weiterreise durch die CSS-Abenteuer halten Sie dieses Wissen über das Overscroll-Verhalten in Ihrer Tasche bereit. Es mag wie ein kleiner Detail erscheinen, aber es sind diese kleinen Berührungen, die Ihre Webdesigns von gut zu großartig machen können.

Happy Coding, und mögen Ihre Scrolls immer glatt sein!

Credits: Image by storyset