Intent to Implement: CSS scroll-boundary-behavior

158 views
Skip to first unread message

Yunjia (Sandra) Sun

unread,
Dec 9, 2016, 2:16:59 PM12/9/16
to blin...@chromium.org, Majid Valipour
Contact emails

Spec

Summary
CSS scroll-boundary-behavior allows developers to decide the browser's behavior once a scroller has reached its full extent. The unused delta can be propagated to the parent causing scroll chaining, create a glow/bounce effect without chaining, or just get consumed silently. This would be a standardization of "-ms-scroll-chaining" with some modification.

scroll-boundary-behavior: propagate | contain | none
propagate: propagate scroll to the parent scroller. If there is no parent scroller (e.g., viewport) user-agent may perform a default action (e.g. navigation) or show any appropriate overscroll UI affordance. This is the default value.
contain: do not propagate. The user agent may show an appropriate overscroll UI affordance such as glow/bounce etc.
none: same as contain but also prevents any overscroll UI affordance e.g. bounce or glow.
There will be scroll-boundary-behavior-{x,y} long-hands too.

Motivation
Scroll chaining may not always be a desirable behavior. For example, any scroll happening in fixed position chat boxes (e.g., those at the bottom of the Facebook or Gmail page) should not be propagated to the document.
-ms-scroll-chaining is a vendor specific API. The CSS property provides a simple declarative way to prevent  scroll chaining. Unfortunately it is only limited to touch/touchpad scrolls and also only supported by IE and Edge at the moment
This means that currently the best cross-browser compatible way to prevent scroll chaining is to have a combination of blocking wheel event listener (bad for performance), blocking keyboard listeners for all scroll inducing keys, carefully crafted touch-action values, and perhaps even -ms-scroll-chaining. These are rather ugly and complex hacks that "-ms-scroll-chaining" should have been able to replace but it cannot in its current form.

Interoperability risk
Firefox: No public signals
Safari: No public signals
Web developers: Positive support.
This addresses multiple requested features on chromium bugs (1, 2, 3) and according to a quick http-archive search “-ms-scroll-chaining: none” is used in 0.4% of top 300K pages despite being limited in functionality and only supported on IE/Edge.
The final shipping and shape of the API depends on having consensus in CSSOM View.

Compatibility risk
None. This is a new feature and thus it does not have any compatibility risk.

Ongoing technical constraints
None.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux,
Chrome OS, Android, and Android WebView)?
Yes

OWP launch tracking bug

Link to entry on the Chrome Platform Status

Requesting approval to ship?
No

Reply all
Reply to author
Forward
0 new messages