Overscroll Customization

Overscroll customization refers to a set of scrolling events that can be used in the overscrolling scenarios. This repository contains an explainer and a proposed specification for a new scroll events called overscroll and scrollend to address the need for customizing overscroll and complete the existing scroll event and expose more information to the content that is being scrolled.

If the incubation around this API is successful (e.g. is shipped by multiple browsers) then this spec hopefully will transition to W3C CSS specification.

Problem

With CSS overscroll behavior property can prevent user-agent defined default boundary actions. Overscroll affordance (e.g. rubber-banding or glow effect), pull to refresh, and history swipe navigation are examples of those default boundary actions.

However, in order to implement customized behaviors, they still need to register a combination of scroll, touch, and wheel event listeners to find out when overscrolling has started and trigger their customized scroll boundary behavior. This approach has the following disadvantages/limitations:

Needs to be implemented for different methods of scrolling separately (touchscreen, wheel, keyboard, etc.)
If the developer wants to trigger overscroll animation at the end of the scroll gesture, touchend event listener can be used for touchscreen scrolling. However for other methods of scrolling (e.g. touchpad scrolling) this won’t be possible using the currently existing events.
In presence of a cross origin iframe the embedder that might get scrolled might not get the touchmove/wheel events at all if the touch starts on the cross origin iframe and that frame doesn't have any scrollable content.

Solution

We are proposing two new event types:

overscroll: To be fired at the scrolling element when it reaches its scrolling extent and while it overscrolls.
scrollend: To be fired at the scrolled/overscrolled element indicating that the scroll sequence has ended and any scroll offset changes have been applied.

Note that during scroll, developers can always check the offset of the scrolling element to get what they need. But that is not the case for the overscrolling case as the offset of the scrolling element remain the same. For that we need to also expose deltaX and deltaY attributes on overscroll event to indicates how much the element has overscrolled. You can look at the exact idl in the proposed specification.

Feature Detection

These events can be detected by the existence of their global listeners.

  if (window.onoverscroll !== undefined) {
    // ... UA supports overscroll event.
  }
  if (window.onscrollend !== undefined) {
    // ... UA supports scrollend event.
  }

References

Status

This feature is now implemented behind Chrome "Experimental Web Platform features" flag to get more feedback from developers.

foolip / overscroll-scrollend-events