CSS overscroll behavior
Das Modul CSS overscroll behavior stellt Eigenschaften bereit, um das Verhalten eines Scroll-Containers zu steuern, wenn dessen Scroll-Position den Scroll-Grenzwert 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.
Wenn Sie beispielsweise einen Kommentar in einem Blog verfassen, kann es sein, dass beim Überschreiten der Länge des bereitgestellten <textarea>
das Scrollen über das Ende des Textbereichs hinaus dazu führt, dass der gesamte Blog scrollt. Dies liegt daran, dass das Erreichen des Endes eines scrollbaren Bereichs, auch bekannt als Scroll-Grenzwert, dazu führen kann, dass anderer Inhalt oder die gesamte Seite scrollt. Diese kontinuierliche Scroll-Erfahrung 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 (z. B. in <textarea>
), wird beim weiteren Scrollen über den scrollbaren Bereich hinaus das Scrollen im übergeordneten Element oder auf der zugrunde liegenden Seite ausgelöst.
Im Gegensatz dazu kann das Scrollen durch die Allgemeinen Geschäftsbedingungen einer Website bis zum Ende des Inhalts, um beispielsweise ein Kontrollkästchen zu aktivieren, verhindern, dass die Seite selbst scrollt oder "springt" (z. B. auf einem Smartphone). Dieses Beispiel zeigt, dass Sie das Overscroll-Verhalten steuern und Scroll-Chaining verhindern können.
Dieses Modul definiert das Overscroll-Verhalten und ermöglicht es Ihnen, Aktionen festzulegen, die ausgelöst werden, wenn ein Benutzer über die Grenzen eines scrollbaren Elements hinaus scrollt.
Referenz
CSS-Eigenschaften
Glossarbegriffe
Leitfäden
- Lernen: Überlaufender Inhalt
-
Lernen Sie, was Überlauf ist und wie man ihn verwaltet.
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
Ereignis im Dokument
Spezifikationen
Specification |
---|
CSS Overscroll Behavior Module Level 1 |
Siehe auch
- CSS Box-Modell Modul
- CSS logische Eigenschaften und Werte Modul
- CSS scroll snap Modul
- Take control of your scroll - customizing pull-to-refresh and overflow effects auf developer.chrome.com (2017)