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

• Learn: 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

• {{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}} 

See also

• CSS scroll anchoring module
• CSS scroll snap module
• CSS box model module
• CSS logical properties and values module