CSS overscroll-behavior Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The overscroll-behavior CSS property is used to control the behavior of a scrollable element when it reaches its scroll boundaries. This property is particularly useful for improving the user experience on touch and mobile devices. By using the overscroll-behavior property, web developers can have more control over how scrollable elements behave, providing a smoother and more consistent scrolling experience for users across different devices and browsers.

Initial value: auto
Applies to: non-replaced block-level elements and non-replaced inline-block elements
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.overscrollBehavior

Syntax

overscroll-behavior: [ contain | none | auto ]{1,2}

Values

containDefault scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.
noneNo scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.
autoThe default scroll overflow behavior occurs as normal.

Example

CSS

.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

Browser Support

The following table will show you the current browser support for the CSS overscroll-behavior property.

Desktop

18	63	59	50	16

Tablets / Mobile

63	59	46	16	8	63

Last updated by CSSPortal on: 31st December 2023

Support Us