Interactivity

Overscroll v1.1.0

Utilities for sets an scrollable element that won't affecting the parent scrollable element on touch device.


Class

classcss
overscroll-autooverscroll-behavior: auto
overscroll-containoverscroll-behavior: contain
overscroll-noneoverscroll-behavior: none
overscroll-x-autooverscroll-behavior-x: auto
overscroll-x-containoverscroll-behavior-x: contain
overscroll-x-noneoverscroll-behavior-x: none
overscroll-y-autooverscroll-behavior-y: auto
overscroll-y-containoverscroll-behavior-y: contain
overscroll-y-noneoverscroll-behavior-y: none
Note: Your browser does not currently support the utilities.Note: Utility customizing is unavailable.

Usage

Set an scrollable element that won't affecting the parent scrollable element. This will disable the browser default scroll chaining feature to improve user experience.

An example of an element on the left without the overscroll utility applied. When you scroll to the long text till the end, the whole page will continue to scroll. But the element on the right will not.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, ducimus eum debitis. Magni, officiis numquam recusandae deserunt et maiores molestias quod laudantium. Natus, unde veniam hic labore voluptatibus aliquam ducimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, ducimus eum debitis. Magni, officiis numquam recusandae deserunt et maiores molestias quod laudantium. Natus, unde veniam hic labore voluptatibus aliquam ducimus.Overscroll: OFFLorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, ducimus eum debitis. Magni, officiis numquam recusandae deserunt et maiores molestias quod laudantium. Natus, unde veniam hic labore voluptatibus aliquam ducimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, ducimus eum debitis. Magni, officiis numquam recusandae deserunt et maiores molestias quod laudantium. Natus, unde veniam hic labore voluptatibus aliquam ducimus.Overscroll: ON
<!-- Example -->
<y class="overscroll-contain">
...
</y>

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled