Presets

Target Element

Axis Control

Overscroll Behavior

Save/Load

Interactive Demo

Scroll inside the inner container to see the overscroll behavior in action. Try scrolling past the edges to observe how scroll chaining is affected.

Outer Scrollable Area

This is the parent container. When you reach the end of the inner container's scroll, the overscroll-behavior property determines whether scrolling continues here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Inner Scrollable Area

Current setting: contain

Scroll here to test the behavior. When you reach the top or bottom:

  • auto: Scroll will chain to the outer container
  • contain: Scroll stops here, but bounce effect remains
  • none: Scroll stops, no bounce effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation.

Duis aute irure dolor in reprehenderit in voluptate.

Excepteur sint occaecat cupidatat non proident.

Sunt in culpa qui officia deserunt mollit anim id est laborum.

More outer content below the inner container...

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Excepteur sint occaecat cupidatat non proident, sunt in culpa.

Behavior Comparison

↑↓
autoChains scroll
|⟳
containStops + bounce
|×
noneStops completely

Generated CSS

/* Overscroll Behavior Styles */
.modal {
  overscroll-behavior: contain;
}

Full Example

/* ================================================
   CSS Overscroll Behavior - Complete Implementation
   ================================================ */

/* Basic overscroll behavior */
.modal {
  overscroll-behavior: contain;
}

/* Common Use Cases */

/* 1. Modal/Dialog - Prevent background scroll */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
}

.modal-content {
  max-height: 80vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 2. Sidebar/Navigation - Independent scrolling */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* 3. Chat/Messaging Container */
.chat-container {
  height: 400px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column-reverse; /* New messages at bottom */
}

/* 4. Dropdown Menu */
.dropdown-menu {
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 5. Horizontal Carousel/Slider */
.carousel {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* 6. Full Page App - Disable pull-to-refresh */
html, body {
  overscroll-behavior: none;
}

/* 7. Nested Scrollable Areas */
.outer-scroll {
  overflow: auto;
  height: 100vh;
}

.inner-scroll {
  overflow: auto;
  max-height: 300px;
  overscroll-behavior: contain; /* Prevents scroll chaining to outer */
}

/* 8. Tab Panels with Independent Scroll */
.tab-panel {
  height: 400px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* 9. Code Editor / Terminal */
.code-editor {
  height: 500px;
  overflow: auto;
  overscroll-behavior: contain;
  font-family: monospace;
}

/* 10. Map Container */
.map-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
  overscroll-behavior: none; /* Prevent any scroll interference */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  /* On mobile, might want different behavior */
  .sidebar {
    overscroll-behavior: contain; /* Both axes on mobile */
  }

  /* Disable bounce effect on mobile web apps */
  body {
    overscroll-behavior-y: contain;
  }
}

/* Touch-specific enhancements */
@media (pointer: coarse) {
  .scrollable-container {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Fallback for older browsers (no action needed - graceful degradation) */
@supports not (overscroll-behavior: contain) {
  /*
   * Older fallback using JavaScript would be needed
   * The property gracefully degrades - scroll just chains normally
   */
}

Property Values

ValueEffect
autoDefault. Scroll chaining occurs normally, bounce effects enabled.
containPrevents scroll chaining to ancestors, keeps local bounce effects.
nonePrevents scroll chaining AND disables bounce/refresh effects.

Related Properties

  • overscroll-behavior - Shorthand for both axes
  • overscroll-behavior-x - Horizontal axis only
  • overscroll-behavior-y - Vertical axis only
  • overscroll-behavior-inline - Inline axis (logical)
  • overscroll-behavior-block - Block axis (logical)

Browser Support

  • Chrome: 63+
  • Firefox: 59+
  • Safari: 16+
  • Edge: 18+
  • Opera: 50+

Excellent support (~95% global coverage)

Common Use Cases

  • Modal dialogs - prevent background scroll
  • Sidebars and navigation panels
  • Chat windows and message lists
  • Dropdown menus
  • Disable pull-to-refresh on mobile PWAs
  • Horizontal carousels and sliders
  • Nested scrollable containers

Best Practices

  • Use contain for most modal/overlay scenarios
  • Use none on body to disable pull-to-refresh
  • Apply to the scrollable element, not its parent
  • Test on touch devices for bounce effect behavior
  • Combine with overflow: auto or scroll
  • Consider using logical properties for RTL support

Mobile Considerations

  • iOS Safari: Bounce effect is on html/body
  • Android Chrome: Pull-to-refresh is browser-level
  • PWAs: Use none to feel more native
  • Touch scrolling: Add -webkit-overflow-scrolling: touch

Rate this tool