CSS overscroll behavior
Das CSS overscroll behavior-Modul bietet Eigenschaften, um das Verhalten eines Scroll-Containers zu steuern, wenn seine Scroll-Position den Scroll-Grenzbereich erreicht. Die Kontrolle dieser Eigenschaft ist besonders nützlich in Szenarien, in denen eingebettete scrollbare Bereiche nicht das Scrollen des übergeordneten Containers auslösen sollen.
Beim Kommentieren eines Blogs könnten Sie bemerken, dass, wenn Ihr Kommentar die Länge des bereitgestellten <textarea>
überschreitet, das Scrollen über das Ende des Textbereichs das Scrollen des gesamten Blogs verursacht. Dies liegt daran, dass das Erreichen des Endes eines scrollbaren Bereichs, bekannt als Scroll-Grenzbereich, dazu führen kann, dass anderer Inhalt oder die gesamte Seite scrollen. Diese kontinuierliche Scroll-Erfahrung wird als Scroll-Verkettung bezeichnet.
In Situationen, in denen der Inhalt eines Elements größer als sein Container ist und overflow
Scrollen ermöglicht oder standardmäßig zulässt (wie in <textarea>
), wird bei weiterem Scrollen über den scrollbaren Bereich des Elements das Scrollen im übergeordneten Element oder der darunterliegenden Seite ausgelöst.
Umgekehrt wird beim Lesen der Geschäftsbedingungen einer Website und dem Erreichen des Endes des Inhalts, um ein Kontrollkästchen zu aktivieren, möglicherweise nicht das Scrollen oder ein "Bounce-Effekt" (wie auf einem Telefon) ausgelöst. Dieses Beispiel zeigt, dass Sie das Overscroll-Verhalten steuern und die Scroll-Verkettung verhindern können.
Dieses Modul definiert das Overscroll-Verhalten und ermöglicht es, die Aktionen zu spezifizieren, wenn ein Benutzer über die Grenzen eines scrollbaren Elements hinaus scrollt.
Referenz
CSS-Eigenschaften
Glossarbegriffe
Leitfäden
- CSS-Bausteine: Überfließender Inhalt
-
Lernen Sie, was Überlauf ist und wie Sie ihn verwalten können.
Verwandte Konzepte
-
scrollbar
ARIA-Rolle -
Enthaltender Block Konzept
-
CSS overflow Modul:
overflow
Kurzform-Eigenschaftoverflow-clip-margin
Eigenschaftscroll-behavior
Eigenschafttext-overflow
Eigenschaft
-
Scroll-Container und scrollport Glossarbegriffe
-
CSS scroll snap Modul:
scroll-padding
Kurzform-Eigenschaftscroll-snap-type
Eigenschaftscroll-margin
Kurzform-Eigenschaftscroll-snap-stop
Eigenschaftscroll-snap-align
Eigenschaft
-
CSSOM view Modul:
Element.getBoundingClientRect()
MethodeElement.scroll()
MethodeElement.scrollBy()
MethodeElement.scrollIntoView()
MethodeElement.scrollTo()
Methodescroll
Dokumentereignis
Spezifikationen
Specification |
---|
CSS Overscroll Behavior Module Level 1 |
Siehe auch
- CSS-Boxmodell Modul
- CSS logische Eigenschaften und Werte Modul
- CSS scroll snap Modul
- Nehmen Sie die Kontrolle über Ihren Bildlauf - Anpassen von Pull-to-Refresh und Überlauf-Effekten auf developer.chrome.com (2017)