🌀 CSS overscroll-behavior — Complete Tutorial

🌐 What Is overscroll-behavior?

The overscroll-behavior property controls what happens when a user scrolls **past the boundary** of a scrollable container. It helps prevent unwanted browser behaviors such as:

  • ✔ The page scrolling when a nested element reaches its end
  • ✔ Pull-to-refresh on mobile
  • ✔ Scroll chaining between nested containers
  • ✔ Bounce/glow effects on some devices
>>“Use overscroll-behavior to control scrolling interactions and avoid scroll chaining.”

Note

✔ Works on scroll containers
✔ Improves UX in modals, sidebars, carousels, and full-page apps
✔ Helps create app-like scrolling behavior

📦 Syntax

overscroll-behavior syntax

overscroll-behavior: auto | contain | none;

/* Shorthand expands to */
overscroll-behavior-x: auto | contain | none;
overscroll-behavior-y: auto | contain | none;
ValueDescription
autoDefault. Scroll chaining occurs normally.
containPrevents scroll chaining but allows default browser effects (e.g., bounce).
nonePrevents scroll chaining AND disables browser overscroll behaviors (e.g., pull-to-refresh).

📌 1. Prevent Scroll Chaining Inside a Modal

Modal scroll isolation

.modal-content {
  overscroll-behavior: contain;
}

When the modal reaches top/bottom scroll limit, the page behind it does not scroll. Useful for dialogs, sidebars, and drawers.

📌 2. Disable Overscroll Completely

No overscroll at all

body {
  overscroll-behavior: none;
}

Prevents scroll chaining and browser overscroll actions like pull-to-refresh on mobile.

📌 3. Prevent Horizontal Overscroll

Only lock X direction

.gallery {
  overscroll-behavior-x: contain;
}

Useful for horizontal carousels.

📌 4. Prevent Vertical Overscroll (Scrollable Table)

Vertical containment

.table-wrapper {
  overscroll-behavior-y: contain;
}

📌 5. Create an App-Like Fullscreen Scroll Experience

Web app smooth scrolling

html, body {
  height: 100%;
  overscroll-behavior: none;
}

Prevents browser “bounce” and system gestures from interfering.

📌 6. Prevent Parent Scrolling When Reaching Child Scroll End

Nested scroll container

.scroll-box {
  overflow: auto;
  overscroll-behavior: contain;
}

The scroll stays inside the element — the page never scrolls when you reach the end.

🧪 Real-World Examples

1️⃣ Chat App Message Pane

Chat scrolling

.chat-messages {
  overscroll-behavior-y: contain;
}

Prevents the entire page from scrolling when reaching the top/bottom of chat.

2️⃣ Mobile Navigation Drawer

Drawer scroll

.drawer {
  overscroll-behavior: contain;
}

3️⃣ iOS Pull-to-Refresh Disable (Common Use)

No pull-to-refresh

body {
  overscroll-behavior: none;
}

Prevents accidental pull-to-refresh interactions.

⚠️ Common Mistakes

  • ❌ Using overscroll-behavior on elements that do not scroll
  • ❌ Expecting it to stop scroll overflow — it only affects scroll behavior
  • ❌ Forgetting to set overflow: auto or scroll on scrollable containers
  • ❌ Overusing none, which disables useful system gestures

Note

overscroll-behavior does NOT modify scrolling itself — it only prevents scroll chaining and browser overscroll actions.

🔥 Summary

The overscroll-behavior property allows you to control scroll boundaries, prevent scroll chaining, and block browser gestures like pull-to-refresh. It is essential for building modals, drawers, carousels, dashboards, and mobile web apps.

>>“Take control of scroll — overscroll-behavior helps you build smoother, app-like interfaces.”

Learn more →MDN Docs 📘