CSS overscroll behavior
The CSS overscroll behavior module provides properties to control the behavior of a {{Glossary("Scroll_container", "scroll container")}} when its scroll position reaches the {{Glossary("Scroll_boundary", "scroll boundary")}}. Controlling this aspect is particularly useful in scenarios where embedded scrollable areas should not trigger scrolling of the parent container.
When commenting on a blog, you might notice that if your comment exceeds the length of the provided {{htmlelement("textarea")}}, scrolling beyond the end of the text area causes the entire blog to scroll. This is because reaching the end of a scrollable area, known as the {{Glossary("Scroll_boundary", "scroll boundary")}}, can lead to scrolling other content or the entire page. This continuous scrolling experience is called {{Glossary("Scroll_chaining", "scroll chaining")}}.
In situations where the contents of an element are larger than its container and {{cssxref("overflow")}} allows or defaults to scrolling (like in <textarea>
), continued scrolling past the element's scrollable area will initiate scrolling in the parent element or the underlying page.
Conversely, scrolling through a website's terms and conditions and reaching the end of the content to enable a checkbox, may not force the page to scroll or bounce (as on a phone). This example shows that you can control overscroll behavior and prevent scroll chaining.
This module defines the overscroll behavior, enabling you to specify the actions when a user scrolls beyond the boundaries of a scrollable element.
Reference
CSS properties
- {{CSSxRef("overscroll-behavior")}} shorthand
- {{CSSxRef("overscroll-behavior-block")}}
- {{CSSxRef("overscroll-behavior-inline")}}
- {{CSSxRef("overscroll-behavior-x")}}
- {{CSSxRef("overscroll-behavior-y")}}
Glossary terms
- {{Glossary("Scroll_boundary", "Scroll boundary")}}
- {{Glossary("Scroll_chaining", "Scroll chaining")}}
Guides
- CSS building blocks: Overflowing content
- : Learn what overflow is and how to manage it.
Related concepts
-
scrollbar
ARIA role -
Containing block concept
-
CSS overflow module:
- {{cssxref("overflow")}} shorthand property
- {{Cssxref("overflow-x")}}
- {{Cssxref("overflow-y")}}
- {{CSSxRef("overflow-block")}}
- {{CSSxRef("overflow-inline")}}
- {{CSSxRef("overflow-clip-margin")}} property
- {{CSSxRef("scroll-behavior")}} property
- {{CSSxRef("text-overflow")}} property
- {{cssxref("overflow")}} shorthand property
-
{{Glossary("Scroll_container", "Scroll container")}} and scrollport glossary terms
-
CSS scroll snap module:
- {{cssxref("scroll-padding")}} shorthand property
- {{cssxref("scroll-snap-type")}} property
- {{cssxref("scroll-margin")}} shorthand property
- {{cssxref("scroll-snap-stop")}} property
- {{cssxref("scroll-snap-align")}} property
-
CSSOM view module:
- {{domxref("Element.getBoundingClientRect()")}} method
- {{domxref("Element.scroll()")}} method
- {{domxref("Element.scrollBy()")}} method
- {{domxref("Element.scrollIntoView()")}} method
- {{domxref("Element.scrollTo()")}} method
- {{domxref("Document.scroll_event", "scroll")}} Document event
Specifications
See also
- CSS box model module
- CSS logical properties and values module
- CSS scroll snap module
- Take control of your scroll - customizing pull-to-refresh and overflow effects on developer.chrome.com (2017)