Interactivity

Overscroll

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

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
overscroll-auto	overscroll-behavior: auto
overscroll-contain	overscroll-behavior: contain
overscroll-none	overscroll-behavior: none

class	css
overscroll-x-auto	overscroll-behavior-x: auto
overscroll-x-contain	overscroll-behavior-x: contain
overscroll-x-none	overscroll-behavior-x: none

class	css
overscroll-y-auto	overscroll-behavior-y: auto
overscroll-y-contain	overscroll-behavior-y: contain
overscroll-y-none	overscroll-behavior-y: none

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: OFF

Overscroll: ON

<div class="overscroll-contain">
  ...
</div>

HTML

.dummy {
  @extend
    .overscroll-contain;
}

SCSS