-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Description
What problem are you trying to solve?
Common UI patterns like side-menus (swiping past the edge to reveal a menu) or swipe-to-action (swiping a list item to reveal delete buttons) currently rely on complex nested scrollers or JavaScript gesture polyfills. These workarounds are difficult to implement, computationally expensive, and often fail to provide accessible alternatives for non-touch users. This proposal aims to address common cases with a declarative minimal-script solution
What solutions exist today?
Currently effects like this are implemented in script with controlling positioning of the panels in response to mouse/touch moves. It is possible to construct nested scroller solutions or use scroll driven animations for similar effects, but it is typically hard to achieve the right behavior.
How would you solve it?
We propose a set of HTML attributes that declaratively bind an element (the “overscroll content”) to the scroll boundary of a container.
Crucially, this binding is defined on an activatable element (like a ). This ensures that every gesture-based action has a guaranteed, accessible fallback interaction (click/Enter) without extra developer effort.
Anything else?
This is currently being incubated at OpenUI.
Explainer (from which some of the content of this issue was sourced): https://open-ui.org/components/overscroll-actions.explainer/