Overscroll Regions Exploration

Gmail

Recreation of a Gmail inbox view, in which you can swipe left or right to archive emails or toggle their read/unread state.

Overscroll Regions Exploration

A collection of demos exploring proposed API shapes for overscroll regions in web browsers.

The Idea

This project explores a proposed API shape for overscroll regions in web browsers, allowing developers to define content that appears when a user overscrolls a container. The idea is to define this in CSS, and have the browser handle the rest. This way, different overscroll areas can be defined through media queries (e.g. a sidebar that is always visible on a large screen vs is tucked away in an overscroll region on a small screen layout).

CSS Properties

Setting up overscroll areas and where elements appear is done using the overscroll-areas,overscroll-sizes, and overscroll-area properties.

Defining Overscroll Areas

The overscroll regions are defined on the scroll container using the overscroll-areas and overscroll-sizes properties.

.scroller {
    overscroll-areas: none none none --menu;
    overscroll-sizes: none none none 200px;
}

The overscroll-areas property defines names for regions in order: top, right, bottom, and left. So the example above creates a single overscroll region named --menu on the left side.

The values can be:

none - No overscroll region
<dashed-ident> - The name for the overscroll region

The name can be followed by [overlay] or [underlay] to specify the behavior.

overlay - The overscroll region is rendered on top of the scrollable content
underlay - The overscroll region is rendered underneath the scrollable content

When no behavior is specified, the default behavior is applied. This one pushes the main content out of the way.

The overscroll-sizes property defines the thickness of those regions.

Positioning Content

To position content within a region, use the overscroll-area property on the child element.

.element {
    overscroll-area: --menu;
}

Behavior

The overscroll regions are not visible and inert by default. When a user overscrolls in a certain direction, the overscroll region in that direction is revealed, snaps, and the rest of content in the scroller is inerted.

When scrolling back in the opposite direction, the overscroll region is hidden again and the scroller becomes active again.

It is also possible to use the arrow keys to overscroll. Hitting ESC closes a visible overscroll region.

Command Buttons

In addition to overscroll regions, the prototype also supports command buttons to toggle these overscroll regions.

<button command="toggle-overscroll" commandfor="menu">Toggle Menu</button>

These buttons are optional, and are not required to use overscroll regions.

Prototype Implementation

This is a prototype that uses JavaScript to generate the overscroll grid layout.

import { createOverscrollGrid } from "./js/createOverscrollGrid.js";
createOverscrollGrid(scroller, contentElements);

To make it work, all properties and actions are prefixed with --.

.scroller {
    --overscroll-areas: none none none --menu;
    --overscroll-sizes: none none none 200px;
}

What is missing from this prototype is:

Resize behavior: the grid is not rebuilt after a resize.
Overscroll progress events
Snap to active

Implemented:

Inertness of non-active cells
Focus management
Light dismiss
Arrow keys
…

Sidebar

Gmail