Ever scroll inside a modal or sidebar and accidentally trigger the whole page to bounce? The CSS overscroll-behavior property solves this! It gives you fine-grained control over how scroll containers behave when they hit their limits — perfect for modals, carousels, or fixed panels. In this MiniCoursey quick guide, you’ll learn what overscroll-behavior does, how to use it, and why it’s a must-have for polished, frustration-free scrolling.
What is overscroll-behavior?
overscroll-behavior controls what happens when a user scrolls past the boundaries of a scroll container. By default, scrolling can ‘chain’ to parent containers — sometimes creating unwanted page bounce or scroll jumps.
Basic Syntax
Set it on your scrollable container to stop unwanted scroll chaining.
.modal {
overflow: auto;
overscroll-behavior: contain;
}
In this example, scrolling inside the modal stays inside — no more background page jumping.
Common Values
auto— Default chaining behavior.contain— Stops scroll from passing to parents.none— Completely blocks scroll chaining and bounce.
Why Use It?
- Stop scroll leaks from modals, side panels, or carousels.
- Improve mobile UX by preventing scroll bounce on overlays.
- Keep focus inside components for a polished feel.
💡 Pro Tip: Combine with
overflow: autoandposition: fixedfor solid modal behavior.
⚠️ Common Mistake: Don’t block all scroll chaining unless really needed — sometimes bounce is a feature!
FAQ
Q: Is overscroll-behavior supported everywhere?
A: Yes — it’s well supported in modern browsers. Always test on mobile for the best results.
Q: Can I control overscroll directionally?
A: Yes! Use overscroll-behavior-x and overscroll-behavior-y for fine control.
Related Link
👉 Check out previous: CSS Scroll Behavior — Smooth Scrolling Made Simple
Where to Learn More
Visit MDN’s overscroll-behavior docs for more examples and advanced use cases.
Conclusion
Congrats — you now know how to control scroll bounce and chaining with overscroll-behavior! Keep your scroll UX clean and frustration-free.
✨ Bookmark MiniCoursey for more quick & free mini courses!
1 thought on “CSS Overscroll Behavior — Control Scroll Bounce”