overscroll-behavior ist eine Eigenschaft in CSS, die das Verhalten eines Elements steuert, wenn ein Bildlauf erfolgt und der Bildlaufbereich seine Grenzen überschreitet. Dieses Attribut ist besonders nützlich, um das Benutzererlebnis zu verbessern, insbesondere auf mobilen Geräten. Dieses Attribut kann verwendet werden, um den standardmäßigen „Bounce“-Effekt zu vermeiden oder diesen Effekt anzupassen, wenn der Benutzer versucht, durch ein Element zu scrollen, das das Scroll-Limit erreicht hat.
Overscroll-Verhalten: auto |. /* Oder separat für X-Achse und Y-Achse festlegen*/ overscroll-behavior-x: auto |. overscroll-behavior-y: auto |.
auto : Standardwert. Das Element verwendet sein Standard-Bildlaufverhalten. In den meisten Browsern bedeutet dies, dass das Scrollen einen „Bounce“-Effekt hat (d. h. der Inhalt springt nach Erreichen der Grenze leicht zurück), wenn der Scrollbereich überschritten wird. contain : Verhindern Sie die Ausbreitung der Bildlaufkette. Wenn bei einem angegebenen Element gescrollt wird und der Inhalt des Elements außerhalb der Grenzen gescrollt wurde, wird das Scroll-Ereignis nicht an das übergeordnete Element des Elements weitergegeben. Dadurch können unabhängige Bildlaufbereiche erstellt und unnötige Bildlaufkonflikte vermieden werden. none : Verhindert jegliches Standardverhalten beim Scrollen, einschließlich des „Hüpfeffekts“. Das heißt, wenn der Benutzer versucht, durch ein Element zu scrollen, das seine Grenzen erreicht hat, sieht er keine Scrolleffekte oder Animationen.Nehmen wir an, Sie haben eine Seite, die einen scrollbaren inneren Bereich enthält (z. B. eine Liste oder eine Bildergalerie). Wenn Sie möchten, dass dieser innere Bereich beim Scrollen zum Rand stoppt, ohne dass der standardmäßige „federnde“ Effekt entsteht, können Sie dies wie folgt einstellen:
.scrollable-area {
Overscroll-Verhalten: keines;
Höhe: 200px;
overflow-y: auto; /* Scrollen auf der Y-Achse zulassen*/
} In diesem Beispiel wird die Klasse .scrollable-area auf das Element angewendet, bei dem Sie das Scrollverhalten steuern möchten. Legen Sie overscroll-behavior: none; sodass beim Scrollen zum oberen oder unteren Rand des Elements keine zusätzlichen Scrolleffekte oder Animationen auftreten.
Dinge zu beachten
Nicht alle Browser unterstützen dasoverscroll-behavior Attribut. Daher wird eine angemessene Prüfung empfohlen, wenn man sich auf die Funktionalität dieser Eigenschaft verlässt. Einige Browser unterstützen möglicherweise overscroll-behavior-x und overscroll-behavior-y , sodass Sie das horizontale bzw. vertikale Scrollverhalten steuern können. Allerdings ist auch diese Unterstützung begrenzt, so dass auch Tests erforderlich sind. Verwenden Sie dieses Attribut mit Vorsicht, wenn Sie Benutzeroberflächen unter Berücksichtigung von Barrierefreiheit und Benutzererfahrung entwerfen. In einigen Fällen ist das standardmäßige Scrollverhalten (z. B. der „Hüpfeffekt“) für Benutzer möglicherweise intuitiver und verständlicher.Damit ist dieser Artikel über das Overscroll-Behavior-Attribut in CSS abgeschlossen. Weitere Informationen zum CSS-Overscroll-Behavior-Attribut finden Sie in früheren Artikeln auf downcodes.com. Ich hoffe, Sie werden mich in Zukunft unterstützen . downcodes.com!