v144 · css · demo

Dialog Container

A modal <dialog> with a long scrollable list inside. In Chrome 144, overscroll-behavior: contain on the dialog's scroll container prevents scroll chaining to the page behind — even though the dialog itself is not scrollable.

Background page scroll

The striped area below simulates a scrollable page. When the dialog is open and overscroll-behavior: contain is active, scrolling the dialog list to its end will not scroll this background content.

Background page — watch this to see scroll chaining
Background scroll position: 0px

Mode selection

contained

overscroll-behavior: contain — scroll stops at dialog edge

Long scrollable list
contained
Scroll list to bottom — check if page scrolls

the CSS

/* The dialog's inner scroll container */
.dialog-body {
  overflow-y: scroll;
  max-height: 260px;

  /* Chrome 144: now respected even though
     the dialog itself is not scrollable */
  overscroll-behavior: contain;
}

/* Without this, scrolling past the end of the
   list propagates to the page behind —
   even through the backdrop overlay. */

see also