Scroll-Grenze
Eine Scroll-Grenze ist der Punkt, an dem ein scrollbares Element in eine bestimmte Richtung nicht weiter gescrollt werden kann, entweder oben oder unten (oder links/rechts für horizontales Scrollen). Dies ist typischerweise der Rand des Scrollport.
Wenn der Inhalt eines Scroll-Containers die Containergröße in der Scrollrichtung nicht überschreitet, wird der Container immer an seiner Scroll-Grenze betrachtet. Dies liegt daran, dass kein zusätzlicher Inhalt zum Scrollen vorhanden ist. Wenn das Scrollen des Inhalts verhindert wird, beispielsweise wenn overflow: hidden
gesetzt ist, ist das Element kein Scroll-Container, und somit gibt es keine Scroll-Grenze.
Wenn die Scroll-Grenze des Scrollports erreicht wird, indem ein Benutzer den Inhalt scrollt, kann ein visueller Effekt wie ein Bounce oder eine funktionale Aktion wie Pull-to-Refresh auf mobilen Geräten auftreten. Dieses Standardbrowserverhalten wird als Grenzenstandardaktion bezeichnet.
Zum Beispiel erzeugt das Ziehen einer Seite nach unten auf mobilen Geräten, wenn man sich bereits am oberen Rand befindet, einen Bounce-Effekt und löst manchmal ein Seitenrefresh aus. Dieser Bounce oder Refresh ist die Grenzenstandardaktion.
Grenzenstandardaktionen können lokal oder nicht-lokal sein.
-
Eine lokale Grenzenstandardaktion ist die Aktion, die an der Grenze eines bestimmten scrollbaren Bereichs, der auf dieses Element beschränkt ist, auftritt. Diese Aktion wird als lokal betrachtet, da sie keine Auswirkungen auf übergeordnete Container oder den Rest der Webseite hat.
-
Eine nicht-lokale Grenzenstandardaktion tritt auf, wenn das Erreichen der Scroll-Grenze eines Scroll-Containers Auswirkungen über das spezifisch gescrollte Element hinaus hat. Ein Beispiel hierfür ist das Scroll-Chaining, bei dem das Erreichen der Scroll-Grenze eines Elements das Scrollen in einem übergeordneten oder Vorfahren-Element auslöst und möglicherweise eine seitenweite Aktion, wie eine Navigation, initiiert.
Siehe auch
overscroll-behavior
CSS-Eigenschaft- CSS-Überlauf Modul
- CSS-Überscroll-Verhalten Modul
- CSS-Scroll-Snap Modul
- CSS-Scroll-Verankerung Modul