v149 · developer trial · interactions

Overscroll Gestures

A set of CSS primitives that let arbitrary elements anchor to the overscroll regions of a scroller — and be revealed with the same swipe-past-the-end gesture users already know from native apps. Pull-to-refresh, swipe-to-delete, drawer reveal, all in CSS.

concepts

  1. Pull to Reveal

    A scroller with a "refresh" panel anchored above its top edge. Drag past the top — the panel reveals progressively. Release and either it snaps back or commits a refresh, just like the native pattern.

  2. Swipe to Delete

    An inbox where each row uses overscroll-attach: right to anchor a delete action off-screen. Swipe a row left, release past the threshold, and the message is removed — no touch-event JavaScript.

  3. Swipe Drawer

    An action drawer that reveals from the bottom when the user overscrolls a feed past its last item — the native share-sheet gesture pattern implemented in CSS. Includes an event log and touch/scroll detection.

  4. Chat Reactions

    A chat thread where dragging any message bubble horizontally reveals a reaction bar (emoji + reply) anchored just off-screen. New messages can be sent and auto-replied. Shows the bidirectional overscroll reveal pattern with pointer events.

  5. Pull to Load More

    A paginated developer feed where scrolling past the bottom triggers loading the next page. An IntersectionObserver watches the sentinel zone; overscroll-behavior-y: contain keeps the pull from scrolling the outer page. Simulates realistic network latency and animated post insertion.

  6. Nested Scrollers

    An inner scroll list embedded inside an outer scroller — the classic "scroll chaining" problem. Toggle between default mode (inner overscroll propagates to outer) and overscroll-behavior-y: contain (inner overscroll blocked at the boundary). An event log timestamps each scroll event and shows exactly when chaining is stopped.

why it shipped

Pull-to-refresh, swipe-to-delete, and pull-up drawers are everywhere in native apps. On the web, building them well requires a thicket of pointer-event listeners, CSS variables, and animation-frame work — and the results almost never feel quite right. The overscroll-gesture primitives wire the platform's existing scrolling machinery to elements you choose. The result moves with the user's finger at native frame rates because the compositor owns the animation.

references

implementation reference

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