demo · v149

Pull to Reveal

Pull down while the list is already at the top. With the v149 CSS path enabled, the refresh panel is anchored to the top overscroll region; otherwise the page enables a pointer fallback so mouse, trackpad, and touch visitors can still test the threshold and cancel states.

Developer trial / flag-gated CSS path. Enable chrome://flags/#overscroll-gestures in Chrome 149+ to test the native CSS gesture path. This page feature-detects scroll-anchor-overflow: gesture and only installs the JavaScript pointer fallback when the CSS path is not available.
CSS gesture support: checking
Runtime path: checking
Containment: contain

interactive pull test

overscroll-behavior-y
detecting path threshold: 100px
Pull from the top edge
Article 1. A history of pull-to-refresh and the native gesture pattern.
Article 2. Why the gesture stuck: muscle memory and predictable release thresholds.
Article 3. Reimagining the same idea for the web with anchored overscroll panels.
Article 4. Compositor-driven gestures and native-feeling motion without a JavaScript animation loop.
Article 5. When pull-to-refresh is the wrong answer because accidental refresh would destroy context.
Article 6. Designing a disarmed state so release-before-threshold clearly cancels.
Article 7. Why nested scrollers need containment before any overscroll affordance feels reliable.
Article 8. How a failed refresh should keep the old feed visible and leave the panel dismissible.
Article 9. Why native scrolling machinery is better placed to own this gesture.
Article 10. Putting the gesture back where it belongs: the browser scroll pipeline.
scroll position 0 - pull while at top
pull distance0px
stateidle
parent chain0px

event log

spec CSS path

@supports (scroll-anchor-overflow: gesture) {
  .refresh-panel {
    scroll-anchor-name: refresh-panel;
    scroll-anchor-overflow: gesture;
  }

  .scroller {
    overscroll-behavior-y: contain;
    scroll-anchor-overflow-top: refresh-panel;
  }
}

The live stylesheet above contains the same @supports-gated path. When unsupported, the fallback pointer recognizer updates the same panel and metrics so the cancel and commit states remain testable.

edge cases

release before threshold

A short pull leaves the panel disarmed. Releasing resets the transform and logs a cancellation instead of refreshing.

scroll chaining

Switch to overscroll-behavior-y: auto and the parent-chain meter increases, showing the pull leaking out of the list.

refresh failure

Select the failure outcome before a full pull. The old list stays visible and the panel returns to an idle state after reporting the failure.

see also

implementation reference

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