v149 · css / scroll · developer trial

Overscroll Gestures

A new set of CSS primitives that let elements anchor to the overscroll area of a scrolling container and be revealed by swipe gestures — bringing swipe-to-reveal drawers, pull-to-refresh panels, and snap-to-edge UIs to the web without custom JavaScript scroll hacks.

Developer trial / behind a flag In developer trial in Chrome 149. Enable via chrome://flags/#enable-experimental-web-platform-features. The API is still evolving; no spec URL is available yet.

at a glance

Status in 149	In developer trial (behind a flag)
Flag	`chrome://flags/#enable-experimental-web-platform-features`
Standards position	Firefox: No signal · Safari: No signal
Spec	No stable spec URL yet
Blink component	Blink>Scroll
ChromeStatus	5261280285949952 — Overscroll Gestures

why it exists

Swipe-to-reveal patterns — pull-to-refresh, swipe-open side drawers, swipe-to-dismiss cards — are a staple of native mobile apps. On the web these require listening to touch events, tracking velocity, animating elements manually, and fighting with the browser's own overscroll behaviour. Overscroll Gestures brings this pattern into CSS: elements declared as overscroll anchors are hidden in the overscroll area of a scroller, then revealed as the user swipes beyond the scroll boundary — using the same composited animation path as scroll-driven animations.

Source: chromestatus summary.

the primitives

overscroll-anchor	CSS property (on the reveal element). Declares that this element lives in the overscroll area of a named scroller and should be revealed when the user swipes past the boundary. Takes a value specifying which edge (`start` / `end`) and which scroller.
overscroll-action	CSS property (on the scroller). Opts the scroller into the overscroll-gesture system and specifies what to do at the boundary (e.g. `reveal` to expose anchored elements, `refresh` for pull-to-refresh).
Scroll-linked reveal	The reveal element's position is driven by overscroll progress — composited by the browser, so no main-thread JS is required during the gesture.

Source: chromestatus summary. Property names and values are early-stage and may change significantly before shipping.

example (pull-to-refresh)

/* The refresh indicator lives above the scroll start */
.refresh-indicator {
  overscroll-anchor: start;
  /* Positioned in the overscroll area; revealed by pulling down */
}

/* The list that the user scrolls */
.feed {
  overflow-y: auto;
  overscroll-action: refresh;
  overscroll-behavior-y: contain;
}

/* Browser shows .refresh-indicator as user overscrolls up,
   then fires a "refresh" event when released past threshold */

Swipe-open side drawer

.side-drawer {
  overscroll-anchor: end; /* anchored to right edge of scroller */
}

.page-scroller {
  overflow-x: auto;
  overscroll-action: reveal;
}

browser support

Chrome	149 — developer trial (flag required)
Edge	Tracking Chromium
Firefox	No signal
Safari	No signal