v150 · CSS · demo

Side Menu Pattern

A slide-in navigation drawer implemented as a scrollable container. With overscroll-behavior: chain, scrolling past the top or bottom of the drawer menu passes scroll events through to the page. Toggle to none to see how the scroll becomes trapped inside the drawer instead.

live demo

drawer overscroll-behavior
chain
Main Content
Try this: Open the menu, then scroll the drawer to its bottom. With chain, keep scrolling — the main page underneath will start to scroll too. Switch to none mode and try again — the scroll stops at the drawer boundary.
Content row 1 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.
Content row 2 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
Content row 3 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.
Content row 4 Nam libero tempore cum soluta nobis est eligendi optio cumque nihil impedit.
Content row 5 Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus.

what to observe

overscroll-behavior: chain
Scroll passes through

Open the menu and scroll down past the last item. The drawer has no more content to scroll, so the scroll event propagates to the page behind it. No overscroll glow or bounce is triggered on the drawer itself. The experience feels seamless.

overscroll-behavior: none
Scroll is trapped

Open the menu and try scrolling past the last item. The scroll event never leaves the drawer — the page behind it stays still. On mobile you'd also see no bounce or glow since none suppresses local effects too. The scroll simply stops.

code

/* Drawer element — scrollable navigation panel */
.drawer {
  position: fixed;
  left: 0;
  top: 0;
  width: 260px;
  height: 100%;
  overflow-y: scroll;

  /* chain: pass scroll to page when drawer hits top/bottom,
     but don't show overscroll glow/rubber-band on the drawer */
  overscroll-behavior-y: chain;
}

/* Before Chrome 150, the closest you could get was: */
.drawer-old {
  overscroll-behavior-y: auto; /* chains but also shows overscroll effect */
  /* …or… */
  overscroll-behavior-y: none;  /* traps scroll entirely — no chaining */
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗