Overscroll Behavior overscroll-*

Control the behavior when a user scrolls past the boundary of a scrolling area.

Quick Reference

overscroll-auto

Default scroll chaining behavior

overscroll-behavior: auto

overscroll-contain

Prevent scroll chaining

overscroll-behavior: contain

overscroll-none

Prevent all overscroll effects

overscroll-behavior: none

overscroll-y-contain

Contain vertical overscroll

overscroll-behavior-y: contain

overscroll-x-none

Prevent horizontal overscroll

overscroll-behavior-x: none

Interactive Examples

Overscroll Auto (Default)

Scrollable Content

This container has overscroll-auto behavior. When you scroll to the top or bottom and continue scrolling, the scroll will "chain" to the parent container.

Try scrolling to the bottom of this content and continue scrolling down. The page behind this container will start scrolling.

{Array.from({ length: 10 }, (_, i) => (
Content block {i + 1}
))}

✓ Scroll chaining enabled

✓ Default browser behavior

⚠️ May cause unwanted page scrolling

<div class="h-48 overflow-auto overscroll-auto">
  <div class="h-96">Long content</div>
</div>

Overscroll Contain

Contained Scrolling

This container has overscroll-contain behavior. When you reach the scroll boundaries and continue scrolling, the scroll does NOT chain to the parent.

Try scrolling to the bottom and continuing to scroll down. The page behind this container will NOT scroll.

{Array.from({ length: 10 }, (_, i) => (
Content block {i + 1}
))}

✓ Scroll chaining prevented

✓ Better user experience in modals

✓ Prevents accidental page scrolling

<div class="h-48 overflow-auto overscroll-contain">
  <div class="h-96">Long content</div>
</div>

Overscroll None

No Overscroll Effects

This container has overscroll-none. No scroll chaining and no bounce effects.

{Array.from({ length: 8 }, (_, i) => (
Item {i + 1}
))}

✓ No scroll chaining

✓ No bounce effects

✓ Strict scroll containment

Directional Overscroll

overscroll-y-contain

Vertical overscroll contained, horizontal overscroll chains

overscroll-x-none

Horizontal overscroll disabled, vertical overscroll chains

Common Use Cases

📱 Modal Dialogs

Prevent background scrolling when modal content is scrolled.

<div class="overscroll-contain">

📜 Sidebar Navigation

Keep sidebar scrolling independent from main content.

<nav class="overscroll-contain">

📊 Data Tables

Prevent page scrolling when table reaches scroll limits.

<div class="overscroll-x-contain">

🎨 Image Galleries

Control scroll behavior in image carousels.

<div class="overscroll-x-none">

📝 Chat Interfaces

Keep chat scrolling contained within chat area.

<div class="overscroll-contain">

🔧 Embedded Content

Prevent embedded widgets from affecting page scroll.

<iframe class="overscroll-none">

Understanding Overscroll Behavior

What is Overscroll?

Scroll Chaining

When you reach the end of a scrollable area and continue scrolling, the scroll event "chains" to the parent container.

Bounce Effects

Some browsers show a "bounce" or "rubber band" effect when you scroll past the boundaries.

Pull-to-Refresh

Mobile browsers may trigger pull-to-refresh when scrolling past the top boundary.

Behavior Types

auto (default)

Normal scroll chaining and bounce effects. Standard browser behavior.

contain

Prevents scroll chaining but allows bounce effects within the element.

none

Prevents both scroll chaining and bounce effects. Strictest containment.

Mobile & Touch Considerations

Mobile Behavior

  • •
    Pull-to-Refresh: Can be triggered by overscroll at the top
  • •
    Bounce Effects: iOS Safari shows rubber band scrolling
  • •
    Touch Momentum: Scroll momentum can trigger overscroll
  • •
    Nested Scrolling: Multiple scrollable areas can conflict

Best Practices

  • •
    Use overscroll-contain for modals and overlays
  • •
    Test on actual mobile devices, not just browser dev tools
  • •
    Consider overscroll-none for games or interactive content
  • •
    Use directional overscroll for specific scroll directions

Browser Support & Performance

🌐 Browser Support

Chrome✓ 63+
Firefox✓ 59+
Safari✓ 16+
Edge✓ 18+
Mobile Safari✓ 16+

⚡ Performance Notes

  • • Minimal performance impact
  • • Improves user experience in scrollable areas
  • • Prevents unwanted scroll behaviors
  • • Works well with touch devices
  • • No JavaScript required
  • • Graceful degradation in unsupported browsers

Related Layout Classes

overflow-*

Overflow utilities

overscroll-*

Current page

static

Position utilities

visible

Visibility utilities