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.
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:
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.
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.
}