🌀 CSS overscroll-behavior-inline — Complete Tutorial

🌐 What Is overscroll-behavior-inline?

The overscroll-behavior-inline property controls what happens when a user scrolls **past the boundary of a scrollable container** along theinline axis.

The inline axis depends on writing mode:

  • ➡ Horizontal writing (English): inline = left ↔ right
  • ⬆ Vertical writing (Japanese/Chinese): inline = top ↔ bottom
>>“Use overscroll-behavior-inline when you want to manage scroll chaining and overscroll effects along the inline axis.”

Note

✔ Logical version of overscroll-behavior-x
✔ Prevents scroll chaining between nested elements
✔ Useful for horizontal carousels, sliders, or vertical-writing UIs

📦 Syntax

Syntax

overscroll-behavior-inline: auto | contain | none;
ValueDescription
autoDefault. Allows scroll chaining and browser overscroll effects.
containPrevents scroll chaining along inline direction but keeps browser glow/bounce effects.
nonePrevents scroll chaining AND disables browser overscroll effects.

📌 Understanding Inline Direction

Writing-mode logic

/* Horizontal layout (default) */
writing-mode: horizontal-tb; 
// inline = x-axis (left ↔ right)

/* Vertical layout */
writing-mode: vertical-rl;
// inline = y-axis (top ↔ bottom)

This makes overscroll-behavior-inline extremely useful for multilingual websites.

📌 1. Prevent Horizontal Scroll Chaining in Carousels

Carousel example

.carousel {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

Prevents the page from scrolling horizontally when the carousel reaches the end.

📌 2. Disable Inline Overscroll Completely

Fully block overscroll

.slider {
  overflow-x: scroll;
  overscroll-behavior-inline: none;
}

Stops both scroll chaining AND browser bounce effects.

📌 3. Vertical Writing Mode Example

Vertical writing overscroll

.vertical-section {
  writing-mode: vertical-rl;
  overflow-y: auto;            /* inline direction now vertical */
  overscroll-behavior-inline: contain;
}

Here the inline axis is vertical, so it prevents upward/downward scroll chaining.

📌 4. Horizontal Scrollable Navigation

Nav scroller

.nav-scroller {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

Stops the page from shifting when swiping through the nav list.

📌 5. Chat List or Message Pane (RTL Friendly)

RTL messaging UI

.messages {
  direction: rtl;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

Works naturally for RTL conversations without extra configuration.

🧪 Real-World Use Cases

1️⃣ Horizontal Image Gallery

Image gallery

.image-gallery {
  overflow-x: scroll;
  overscroll-behavior-inline: contain;
}

2️⃣ Prevent Outer Container Scrolling

Nested scroll area

.inner {
  overflow-x: auto;
  overscroll-behavior-inline: none;
}

Ensures the scroll stays inside the element.

3️⃣ App-Like UI Panels

Mobile app UI

.app-panel {
  overscroll-behavior-inline: none;
}

Helps create stable, gesture-safe mobile layouts.

⚠️ Common Mistakes

  • ❌ Applying inline overscroll on non-scrollable elements
  • ❌ Expecting it to control vertical scroll (use block direction for that)
  • ❌ Forgetting writing-mode affects inline axis
  • ❌ Using contain expecting bounce/pull-to-refresh to be disabled (use none)

Note

Use overscroll-behavior-inline when you want scroll discipline specifically on the **inline axis**, especially for components like horizontal lists, carousels, RTL layouts, and vertical-writing UIs.

🔥 Summary

overscroll-behavior-inline controls how an element behaves when scrolling past its inline boundary. It prevents scroll chaining and can disable overscroll effects entirely. It's the logical, writing-mode–friendly version of overscroll-behavior-x.

>>“For scrollable UI that behaves consistently across languages, use logical overscroll properties like overscroll-behavior-inline.”

Learn more →MDN Docs 📘