CssConceptBeginner · 3 min read

What is overscroll-behavior in CSS: Explained with Examples

The overscroll-behavior CSS property controls what happens when a user scrolls past the boundary of a scrollable area. It lets you prevent or allow scroll chaining and bounce effects on touch devices or browsers, improving user experience by controlling scroll behavior beyond limits.

⚙️

How It Works

Imagine you are scrolling a list on your phone. When you reach the top or bottom, sometimes the page behind it also scrolls or you see a bounce effect. The overscroll-behavior property controls this behavior.

It works like a traffic controller for scroll events. When you scroll past the edge of an element, it decides if the scroll should continue to the parent container or stop right there. This helps avoid unwanted scrolling on the whole page when you only want to scroll a specific box.

For example, if you have a chat box inside a page, you might want the chat box to scroll independently without the whole page moving when you reach the top or bottom of the chat.

💻

Example

This example shows a scrollable box with overscroll-behavior: contain; which stops the scroll from moving the page when you reach the edges.

css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
}

.scroll-box {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 2px solid #333;
  background: white;
  overscroll-behavior: contain;
  padding: 10px;
}

.content {
  height: 600px;
  background: linear-gradient(to bottom, #a0c4ff, #bdb2ff);
}

Output

🎯

When to Use

Use overscroll-behavior when you want to control how scrolling behaves at the edges of scrollable areas. It is especially useful on touch devices where scroll chaining or bounce effects can confuse users.

Common cases include:

Preventing the whole page from scrolling when a modal or sidebar is scrolled to its end.
Stopping bounce effects on iOS or Android when scrolling inside fixed containers.
Improving user experience in nested scroll areas like chat windows, dropdowns, or carousels.

✅

Key Points

overscroll-behavior controls scroll chaining and bounce effects.
Values include auto, contain, and none.
contain stops scroll chaining but allows default scroll effects.
none disables all scroll chaining and bounce effects.
Improves scroll control on touch devices and nested scroll areas.

✅

Key Takeaways

overscroll-behavior controls what happens when scrolling reaches the edge of an element.

Use contain or none to prevent unwanted scroll chaining or bounce effects.

It improves user experience on touch devices and nested scrollable areas.

Default value auto allows normal scroll chaining and bounce.

Works well for modals, sidebars, chat boxes, and other scroll containers.