Skip to content

WICG/overscroll-scrollend-events

gh-pages
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

Description of overscroll and scrollend events

Resources

License

MIT, Unknown licenses found

Licenses found

MIT
LICENSE
Unknown
LICENSE.md

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages