v144 · css

Respect overscroll-behavior on non-scrollable scroll containers

The overscroll-behavior applies to all scroll container elements, regardless of whether those elements currently have overflowing content or are user scrollable. Developers can use overscroll-behavior to prevent scroll propagation on an `overflow: hidden` backdrop or an `overflow: auto` element without needing to consider whether it will currently be overflo

concepts

  1. Non-scrollable Overscroll

    overscroll-behavior: contain now works on elements whose content happens to fit. Stops scroll chaining even when there is no overflow.

  2. Popup Overlay

    A popup with overscroll-behavior: contain that doesn't itself scroll — v144 finally stops chained scroll into the parent.

  3. Backdrop Shield

    The canonical modal-backdrop bug: page bleeds through when you wheel on the dimmed area. v144 fixes it by honouring overscroll-behavior: contain even when the element has no overflow.

  4. Dialog Container

    A <dialog> with a long scrollable list inside and overscroll-behavior: contain applied. Scroll to the end of the list — the page behind stays fixed. Before/after toggle to see the difference.

why it shipped

Currently, in order to prevent accidental scroll propagations developers are forced to ensure there is at least a pixel of overflow in containers that wish to enforce overscroll-behavior. When they don't, the overscroll behavior unexpectly changes for the user depending on the size of their window and whether content actually overflows.

references