Overscroll

Use overscroll utilities to control what happens when a user reaches the edge of a scrollable area.

They are useful for modals, drawers, sidebars, chat panels, mobile menus, scrollable tables, nested dashboard panels and full-screen app layouts where scroll behavior needs to stay predictable.

FrontAlign includes unified overscroll utilities and axis-specific overscroll utilities for controlling scroll chaining and boundary behavior.

Quick reference

Group	Classes	Styles	Use case
Unified overscroll	`overscroll-auto`, `overscroll-contain`, `overscroll-none`	`overscroll-behavior: ...;`	Control scroll chaining on both axes at the same time.
Horizontal overscroll	`overscroll-x-auto`, `overscroll-x-contain`, `overscroll-x-none`	`overscroll-behavior-x: ...;`	Control horizontal scroll chaining only.
Vertical overscroll	`overscroll-y-auto`, `overscroll-y-contain`, `overscroll-y-none`	`overscroll-behavior-y: ...;`	Control vertical scroll chaining only.

Overscroll values

Value	Unified	X axis	Y axis	Behavior
`auto`	`overscroll-auto`	`overscroll-x-auto`	`overscroll-y-auto`	Keep the default browser scroll chaining behavior.
`contain`	`overscroll-contain`	`overscroll-x-contain`	`overscroll-y-contain`	Prevent scroll chaining outside the element while keeping local scrolling natural.
`none`	`overscroll-none`	`overscroll-x-none`	`overscroll-y-none`	Prevent scroll chaining and disable native overscroll effects.

Usage

Use unified overscroll utilities when both axes should use the same boundary behavior.

<!-- Keep the browser default behavior -->
<div class="overscroll-auto">
  Default scroll behavior
</div>

<!-- Keep scroll interaction inside the element -->
<div class="overscroll-contain">
  Scrollable panel
</div>

<!-- Disable scroll chaining and overscroll effects -->
<div class="overscroll-none">
  Fullscreen app panel
</div>

Axis control

Use axis-specific utilities when only horizontal or vertical scroll chaining needs to be controlled.

Vertical overscroll

<div class="overscroll-y-contain">
  Vertical scroll area
</div>

Vertical overscroll utilities are useful for sidebars, chat lists, modal bodies, documentation navigation and mobile menus.

Horizontal overscroll

<div class="overscroll-x-contain">
  Horizontal scroll area
</div>

Horizontal overscroll utilities are useful for carousels, data tables, tab bars, horizontal galleries and kanban boards.

Common patterns

Modal body

<div class="overscroll-contain">
  <div>
    Modal body content
  </div>
</div>

This prevents the page behind the modal from scrolling when the modal content reaches its edge.

Drawer panel

<aside class="overscroll-y-contain">
  Drawer content
</aside>

Useful for mobile navigation drawers and side panels.

Chat panel

<div class="overscroll-y-contain">
  <div>
    Message list
  </div>
</div>

This keeps chat scrolling isolated from the main page.

Horizontal table

<div class="overscroll-x-contain">
  <table>
    <tr>
      <td>Large table content</td>
    </tr>
  </table>
</div>

This helps prevent horizontal scroll gestures from affecting the parent layout.

Mobile menu

<nav class="overscroll-y-none">
  Mobile navigation
</nav>

Use this when a mobile panel should behave like a contained app surface.

Dashboard panel

<section class="overscroll-contain">
  Dashboard activity feed
</section>

This prevents scroll chaining between nested dashboard widgets and the main page.

Combining utilities

Overscroll utilities are usually paired with overflow, border, radius, shadow and interactivity utilities.

<!-- Scrollable bordered panel -->
<div class="overscroll-y-contain border rounded-4">
  Scrollable content
</div>

<!-- Floating contained surface -->
<div class="overscroll-contain shadow-large rounded-4">
  Floating panel
</div>

<!-- App-like interactive surface -->
<div class="overscroll-none pointer-auto">
  App surface
</div>

Choosing the right utility

Goal	Recommended utility	Why
Default browser behavior	`overscroll-auto`	Use it to reset a previously applied overscroll behavior.
Prevent scroll chaining	`overscroll-contain`	Keep scrolling inside the current element.
Disable chaining and overscroll effects	`overscroll-none`	Create a stricter app-like scroll surface.
Control vertical scrolling only	`overscroll-y-contain` or `overscroll-y-none`	Use for sidebars, drawers, modal bodies and mobile menus.
Control horizontal scrolling only	`overscroll-x-contain` or `overscroll-x-none`	Use for carousels, wide tables, tab bars and horizontal galleries.
Scrollable modal body	`overscroll-y-contain`	Prevent the page behind the modal from scrolling.
Horizontal carousel	`overscroll-x-contain`	Keep horizontal gestures inside the carousel region.

Usage notes

Use overscroll-contain for modals, drawers and nested scroll panels.
Use overscroll-y-contain for vertical scroll areas like sidebars, chat lists and modal bodies.
Use overscroll-x-contain for horizontal components like carousels, data tables and tab bars.
Use overscroll-none carefully for app-like interfaces where native bounce or chaining behavior should be avoided.
Combine overscroll utilities with overflow utilities when building scrollable containers.