CSS Overscroll-Verhalten
Das CSS Overscroll-Verhalten-Modul bietet Eigenschaften zur Steuerung des Verhaltens eines Scroll-Containers, wenn seine Scroll-Position die Scroll-Grenze erreicht. Die Kontrolle dieses Aspekts ist besonders nützlich in Szenarien, in denen eingebettete scrollbare Bereiche nicht das Scrollen des übergeordneten Containers auslösen sollen.
Beim Kommentieren eines Blogs stellen Sie möglicherweise fest, dass, wenn Ihr Kommentar die Länge des bereitgestellten <textarea>
überschreitet, das Scrollen über das Ende des Textbereichs hinaus das gesamte Blog zum Scrollen bringt. Dies liegt daran, dass das Erreichen des Endes eines scrollbaren Bereichs, bekannt als Scroll-Grenze, dazu führen kann, dass anderer Inhalt oder die gesamte Seite scrollt. Diese kontinuierliche Scrollerfahrung wird als Scroll-Chaining bezeichnet.
In Situationen, in denen der Inhalt eines Elements größer ist als dessen Container und overflow
das Scrollen ermöglicht oder standardmäßig aktiviert ist (wie in <textarea>
), führt das Fortsetzen des Scrollens über den scrollbaren Bereich des Elements hinaus zum Starten des Scrollens im übergeordneten Element oder der zugrunde liegenden Seite.
Umgekehrt kann das Scrollen durch die Nutzungsbedingungen einer Website und das Erreichen des Endes des Inhalts, um ein Kontrollkästchen zu aktivieren, möglicherweise nicht dazu führen, dass die Seite scrollt oder springt (wie auf einem Telefon). Dieses Beispiel zeigt, dass Sie das Overscroll-Verhalten steuern und Scroll-Chaining verhindern können.
Dieses Modul definiert das Overscroll-Verhalten und ermöglicht Ihnen, die Aktionen festzulegen, wenn ein Benutzer über die Grenzen eines scrollbaren Elements hinaus scrollt.
Referenz
CSS-Eigenschaften
Glossarbegriffe
Leitfäden
- Lernen: Überlaufende Inhalte
-
Lernen Sie, was Überlauf ist und wie Sie ihn verwalten können.
Verwandte Konzepte
-
scrollbar
ARIA-Rolle -
Enthaltene Block Konzept
-
CSS Overflow Modul:
overflow
Kurznotationoverflow-clip-margin
Eigenschaftscroll-behavior
Eigenschafttext-overflow
Eigenschaft
-
Scroll-Container und scrollport Glossarbegriffe
-
CSS Scroll Snap Modul:
scroll-padding
Kurznotationscroll-snap-type
Eigenschaftscroll-margin
Kurznotationscroll-snap-stop
Eigenschaftscroll-snap-align
Eigenschaft
-
CSSOM Ansicht Modul:
Element.getBoundingClientRect()
MethodeElement.scroll()
MethodeElement.scrollBy()
MethodeElement.scrollIntoView()
MethodeElement.scrollTo()
Methodescroll
Dokumentereignis
Spezifikationen
Specification |
---|
CSS Overscroll Behavior Module Level 1 |
Siehe auch
- CSS Box Model Modul
- CSS Logische Eigenschaften und Werte Modul
- CSS Scroll Snap Modul
- Übernehmen Sie die Kontrolle über Ihr Scrollen - Anpassung von Pull-to-Refresh und Überlaufeffekten auf developer.chrome.com (2017)