Overscroll Behavior

Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.

Auto

Use overscrollBehavior="auto" to make it possible for the user to continue scrolling a parent scroll area when they reach the boundary of the primary scroll area.

<x.div overscrollBehavior="auto">Lorem ipsum dolor sit amet...</x.div>

Contain

Use overscrollBehavior="contain" to prevent scrolling in the target area from triggering scrolling in the parent element, but preserve "bounce" effects when scrolling past the end of the container in operating systems that support it.

<x.div overscrollBehavior="contain">Lorem ipsum dolor sit amet...</x.div>

Contain

Use overscrollBehavior="none" to prevent scrolling in the target area from triggering scrolling in the parent element, and also prevent "bounce" effects when scrolling past the end of the container.

<x.div overscrollBehavior="none">Lorem ipsum dolor sit amet...</x.div>

Responsive

To control the overscroll-behavior property at a specific breakpoint, use responsive object notation. For example, adding the property overscrollBehavior={{ md: "contain" }} to an element would apply the overscrollBehavior="contain" utility at medium screen sizes and above.

<x.div overscrollBehavior={{ md: 'contain' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.