CSS overscroll behavior
{{CSSRef}}
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
- Learn: Overflowing content
- : Learn what overflow is and how to manage it.
Related concepts
-
scrollbarARIA 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
-
{{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
{{Specifications}}