Skip to content
Description of overscroll and scrollend events
HTML
Branch: gh-pages
Clone or download
Latest commit 927a5d9 Sep 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
CODE_OF_CONDUCT.md
CONTRIBUTING.md Initial version Apr 4, 2019
LICENSE Initial version Apr 4, 2019
LICENSE.md Initial version Apr 4, 2019
README.md
index.html Initial version Apr 4, 2019
params.json Initial version Apr 4, 2019
w3c.json Update w3c.json Sep 27, 2019

README.md

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.
You can’t perform that action at this time.