v145 · CSS · Scroll · demo
Chat Feed
A simulated chat window — the classic non-root scroll container. In Chrome 145, scrolling past the top or bottom edge of the chat log shows the same elastic bounce as the page itself. Use the panel to switch overscroll-behavior values and observe how the bounce and scroll chaining change.
Chrome 145+ — elastic overscroll on non-root scroll containers. Use overscroll-behavior: contain to get the bounce without scroll-chaining to the outer page, or
none to suppress both effects.
Scroll the chat log past the top or bottom · change overscroll-behavior to see the bounce disappear · send a message to add to the log
overscroll-behavior
Chat log
contain
Elastic bounce on the chat log, no scroll chaining to the outer page.
Platform Updates · 12 members
0 msgs
/* Chrome 145: overscroll elastic effect now works on nested scrollers */
/* Chat log — elastic bounce, no parent scroll chaining */
.chat-log {
overflow-y: auto;
overscroll-behavior: contain; /* bounce at boundaries, don't chain */
}
/* Auto: bounce AND chains to outer scroll (new Chrome 145 behaviour) */
.chat-log { overscroll-behavior: auto; }
/* None: no bounce, no chaining — hard stop */
.chat-log { overscroll-behavior: none; }
/* Before Chrome 145: only the root scroller showed the elastic effect.
Nested scroll containers always hard-stopped. Chrome 145 aligns with WebKit. */