overscroll-behavior

overscroll-behavior

Control what happens when a scroll container hits its limit, especially "scroll chaining".

The annoyance

Scroll inside a mini panel and when you hit the end, the PAGE starts scrolling too. overscroll-behavior fixes that.

The fix

.panel {
  overflow-y: auto;
  overscroll-behavior: contain;   /* stop scroll chaining */
}

Values

• auto: default, scroll can chain to parent.
• contain: no chaining; the inner scroll just stops.
• none: no chaining AND no bounce/glow (mobile).

Axis versions

overscroll-behavior-x, overscroll-behavior-y, and overscroll-behavior-block/inline variants.

Real uses

• Modal/litepicker panels: stop background from scrolling.
• Custom carousels with hot corners.
• Nav drawers, keep body locked.

TL;DR

• overscroll-behavior: contain stops scroll chaining.
• none also turns off rubber-banding/glow.
• Put it on the inner overflow container.
• Great for modals, drawers, carousels.