v150 · CSS · Scroll · demo

Bottom Sheet

A maps-style bottom sheet with a scrollable list. Compare the three overscroll-behavior-y values: auto shows an overscroll effect when you reach the top, contain traps scroll inside the sheet, and chain cleanly passes scroll to the page behind when the list is exhausted — no glow, no rubber-band.

Chrome 150+ — overscroll-behavior: chain. In older browsers only auto and contain are available.

Scroll to the top of the list in the phone · change the mode to see different behaviors

[ Map view ]
Nearby Places

Scroll the list in the bottom sheet up past the first item to see how the sheet hands control back to this page.

With chain: the page scrolls smoothly past this text and continues upward without any overscroll animation.

With contain: the scroll is trapped inside the sheet — this page text never scrolls even if you keep going.

With auto: the scroll propagates but the sheet shows an overscroll effect (glow or stretch) before handing off.

Results (8)
  • ☕
    Brew & Bear
    Café · 0.2 km · Open
  • 🍜
    Noodle House
    Restaurant · 0.4 km · Open
  • 📚
    Page & Leaf
    Bookshop · 0.5 km · Closes 8pm
  • 🥗
    Greenfield
    Healthy food · 0.6 km · Open
  • 🎵
    The Record Shop
    Music · 0.7 km · Open
  • 🧁
    Crumb & Co.
    Bakery · 0.9 km · Open
  • 🎨
    Studio Gallery
    Art · 1.1 km · Closes 6pm
  • 🏋️
    Iron Club Gym
    Fitness · 1.3 km · 24 hrs
chain: when the list reaches the top, scroll passes through to the page — no overscroll animation on the sheet. 
/* Bottom sheet list — what happens when scroll hits the top? */

.sheet-list {
  overflow-y: scroll;
  overscroll-behavior-y: chain;   /* ← Chrome 150 */
}

/* auto    — chains + shows local overscroll effect (glow/stretch)
   contain — traps scroll, page behind never moves
   chain   — chains silently: page scrolls, no local overscroll effect */

see also

implementation reference

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