CSS overscroll behavior
Das Modul für die CSS overscroll behavior bietet Eigenschaften, um das Verhalten eines scroll containers zu kontrollieren, wenn seine Scrollposition die scroll boundary erreicht. Diese Kontrolle ist besonders nützlich in Situationen, in denen eingebettete scrollbare Bereiche nicht das Scrollen des übergeordneten Containers auslösen sollten.
Beim Kommentieren eines Blogs haben Sie vielleicht bemerkt, dass wenn Ihr Kommentar die Länge des bereitgestellten <textarea>
überschreitet, das Scrollen über das Ende des Textbereichs hinaus den gesamten Blog zum Scrollen bringt. Dies liegt daran, dass das Erreichen des Endes eines scrollbaren Bereichs, bekannt als scroll boundary, zum Scrollen anderer Inhalte oder der gesamten Seite führen kann. Diese kontinuierliche Scrollerfahrung wird als scroll chaining bezeichnet.
In Situationen, in denen der Inhalt eines Elements größer als sein Container ist und overflow
das Scrollen erlaubt oder standardmäßig zulässt (wie bei <textarea>
), führt das kontinuierliche Scrollen über den scrollbaren Bereich des Elements hinaus dazu, dass im übergeordneten Element oder auf der zugrunde liegenden Seite gescrollt wird.
Im Gegensatz dazu kann das Durchscrollen der Geschäftsbedingungen einer Website und das Erreichen des Endes des Inhalts, um ein Kontrollkästchen zu aktivieren, die Seite möglicherweise nicht zum Scrollen oder Springen (wie auf einem Telefon) zwingen. 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, die Aktionen anzugeben, wenn ein Benutzer über die Grenzen eines scrollbaren Elements hinaus scrollt.
Referenz
CSS-Eigenschaften
Glossarbegriffe
Leitfäden
- Lernen: Überlappende Inhalte
-
Erfahren Sie, was Overflow ist und wie Sie damit umgehen können.
Verwandte Konzepte
-
scrollbar
ARIA-Rolle -
Containing 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 box model Modul
- CSS logische Eigenschaften und Werte Modul
- CSS scroll snap Modul
- Übernehmen Sie die Kontrolle über Ihr Scrollen - Anpassen von Pull-to-Refresh und Überschreibeneffekten auf developer.chrome.com (2017)