Summary

  • A nested scroll area can pass an unfinished gesture to an ancestor when it reaches an edge. A chat window that has run out of messages may therefore send the surrounding page on a trip the reader never ordered.
  • overscroll-behavior: contain can stop that handoff while leaving a local edge effect; none suppresses that effect too. The distinction came from years of discussion about who controls a scroll boundary and how much work a browser should keep doing.

The trouble begins with an entirely ordinary hand movement. A reader drags down a chat transcript inside a long article. The chat reaches its final message. The wheel or finger still has momentum, so the browser may pass the remaining scroll to the page that contains it. In the vocabulary of the 2019 W3C draft, the chat and article form a scroll chain. The transfer at an edge is scroll chaining. The reader sees the article lurch just as they were about to reply to a photograph of somebody's cat. The cat, at least, stays put.

Before a declarative rule, an author could try to intercept wheel or touch events and call preventDefault() when the inner window approached its boundary. The draft explains the bill for that approach. A non-passive listener can delay scrolling while the browser waits to learn whether the script will cancel the event. Cancellation can also kill ordinary movement to the edge along with the unwanted action at the edge. And an event can carry more than one default behavior: a glow or rubber-band effect on the inner window may be welcome even when movement of the parent page is not. One blunt command cannot select between those jobs.

The CSS Working Group's December 2016 discussion caught the issue before the property had its eventual name. The proposal was called scroll-boundary-behavior, an extension of Microsoft's earlier -ms-scroll-chaining idea. Tab Atkins described the decision at a scroller's top or bottom: does scroll intent escape or stay inside? Simon Fraser pressed on gesture latching, where a browser holds one scroller for a gesture, and on the danger of letting a page trap all movement. The group supported specifying the behavior but did not yet resolve its design. A chat widget at its bottom was already on the table as the practical case. This was a real argument about a real thumb, not a quest for an impressive CSS property name.

By January 2018, editor Majid Valipour asked to move the incubated overscroll-behavior work into the CSS Working Group drafts. His issue records a Chrome shipment and a Firefox plan at that moment. More interesting than the release labels is the change in custody: the behavior was leaving a side project for the place where authors and implementers could fight over the exact browser contract. That contract had to separate a scroll container's own response from what it did to its ancestors.

The 2019 First Public Working Draft supplies the public milestone. Its rulebook divides boundary actions into local, such as a visual edge affordance, and non-local, such as passing the gesture to a parent or triggering navigation. auto leaves the browser's usual behavior in place. contain forbids the non-local action and permits the local one: the chat can signal that it has reached bottom without dragging the article away. none also suppresses local affordances. For an infinite scroller that adds more content, that may be desirable; for an ordinary chat, erasing every hint of an edge could make the interface feel strangely dead. The author gets a choice of boundary, not a new physics engine.

The rule can target a vertical or horizontal direction. That sounds simple until a writing system turns the page's logical flow away from the x/y coordinates a developer had in mind. At the Berlin meeting in April 2018, the working group resolved to add overscroll-behavior-block and overscroll-behavior-inline. A boundary can then follow block or inline flow rather than assume that all reading travels like an English page on a desktop monitor. That design decision matters to a site with ten native editions more than another one-line CSS trick ever would.

The draft's examples show three different contracts. A fixed side navigation should often keep its scroll from spilling into the document. A page implementing its own pull-to-refresh can prevent the browser's native boundary action on the relevant axis. An infinite scroller can suppress both chaining and the local rubber-band cue. Those are not interchangeable choices. The practical question is whether reaching the edge means “continue in the next container,” “show me the edge here,” or “leave this boundary quiet.”

When the next reader reaches the last chat message, the site can give that little window a real end. The surrounding article stays where it was; the browser can still tell the hand it has arrived. A small CSS property settled a large misunderstanding between a reader's gesture and a page with too many floors.