About CSS Property "overscroll-behavior"

CSS overscroll-behavior

The overscroll-behavior property controls how scroll interactions behave when a user reaches the edge of a scrollable area.

It helps prevent unwanted "bounce" effects, scroll chaining to parent elements, or accidental page scrolling — particularly useful for touch devices and nested scroll containers, like modals.

Key Values

• auto – Default behavior. Scroll can propagate to parent containers.
• contain – Prevents scroll chaining but may still show visual boundary effects like bounce.
• none – Disables both scroll chaining and boundary effects completely.

Common Use Cases

• Modals or popups to prevent the background page from scrolling.
• Nested scrollable sections like carousels or chat windows.
• Smoother scrolling experiences on mobile devices.

This property is widely supported in modern browsers. For the latest compatibility data, check Can I Use: Overscroll Behavior.

Currently, overscroll-behavior is supported by around 95% of modern browsers, including Chrome, Edge, Firefox, and Safari. Older browsers or Internet Explorer do not support it, so fallback behaviors should be considered.