v145 · CSS · Scroll

Overscroll effect on non-root scrollers

Chrome 145 extends the elastic overscroll effect to nested (non-root) scroll containers. Before this, only the root scroller (the page itself) showed a rubber-band bounce when scrolled past its boundaries; nested scrollable elements clipped silently. Now overscrolling a <div> or any scroll container shows the same tactile affordance, matching platform conventions and reducing the need for custom JavaScript rubber-band implementations.

concepts

  1. Nested Scroller Demo

    Scroll a nested container past its top and bottom edges. In Chrome 145 you'll see an elastic bounce effect instead of the hard clip. Demonstrates overscroll on both vertical and horizontal inner scroll containers.

  2. Overscroll Behavior Comparison

    Side-by-side comparison of overscroll-behavior values — auto (show effect), contain (no effect, no scroll chaining), and none (no effect, no chaining, no glow) — on nested scroll containers.

  3. Effect Toggler

    Two side-by-side scrollers with independent overscroll-behavior controls. Set different values and feel the bounce differ between panes in real time.

  4. Chat Feed

    A simulated chat window — the classic non-root scroll container. Scroll past the top and bottom to see the elastic bounce Chrome 145 now applies to nested scrollers. Toggle overscroll-behavior to compare bounce and chaining modes.

why it shipped

On macOS, iOS, and Android the overscroll effect (elastic bounce / rubber-band) is a fundamental platform affordance: it shows users that they have reached a scroll boundary. Before Chrome 145, only the root scroller showed this effect — any nested div or overflow: scroll element would scroll to its edge and then silently stop or chain to the parent. Chrome 145 applies the same elastic effect to every scroll container that has a rendered scroll boundary, matching WebKit behavior and eliminating the need for JavaScript-powered custom overscroll implementations in inner scroll areas.

control with overscroll-behavior

/* Allow elastic overscroll and scroll chaining (new default) */
.scroller { overscroll-behavior: auto; }

/* Elastic overscroll but NO scroll chaining to parent */
.scroller { overscroll-behavior: contain; }

/* No elastic effect AND no scroll chaining */
.scroller { overscroll-behavior: none; }

/* Per-axis control */
.scroller {
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

references