Overscroll Gestures demo

Summary: Enables revealing hidden content in response to overscroll gestures at scroll boundaries. This allows patterns like side menus, bottom sheets, and swipe-to-dismiss to be built with CSS alone.

• Specs:
  • (not yet)
• Explainers & Early Drafts:
  • htmldemos/gestures/README.md at master · vmpstr/htmldemos
  • [overscroll-gestures] Add overscroll gestures with ability to reveal elements · Issue #12750 · w3c/csswg-drafts
  • Overscroll Gestures with Ability to Reveal Elements
  • Other Declarative Approach Considered in OpenUI - Declarative Overscroll Actions (Explainer)
• Chrome Platform Status:
  • Overscroll Gestures - Chrome Platform Status
• WPT:
  • (not yet)
• Intents:
  • Prototype:
    • Intent to Prototype: Overscroll Gestures
• Implementations:
  • Chrome
    • Prototype (and spec) end-to-end overscroll gesture containers [443719046] - Chromium
• Other Resources:
  • Demo from Adam Argyle
  • Demo from Flackr (polyfill)
  • Simple polyfill on CodePen

.container {
  overscroll-area: --side-menu;
}
.side-menu {
  overscroll-position: --side-menu;
}

.container {
  overscroll-area: --bottom-sheet;
}
.bottom-sheet {
  overscroll-position: --bottom-sheet;
}

.container {
  overscroll-area: --dismiss-left, --dismiss-right;
}
.action-left {
  overscroll-position: --dismiss-left;
}
.action-right {
  overscroll-position: --dismiss-right;
}

<div id="container" overscroll-container>
  <nav overscroll-for="container">Menu</nav>
  <main>Content</main>
</div>