1 of 15

Extensible Scrolling

11/5/14

Tim Dresser - tdresser@chromium.org

Rick Byers - rbyers@chromium.org

BlinkOn 3 recording

2 of 15

Motivation

We needed this 6 years ago!

3 of 15

Vision

Competing with native requires extensibility

4 of 15

Scroll synchronization

Main thread

scroll-delay

Compositor thread

UIWorker

A healthy web requires that we do both!

Code that runs in-sync with scrolling

Modern web: scrolling and app code run on different threads

2 options:

Disable threaded scrolling optimization. It can be a crutch, and we need to keep pushing to eliminate all sources of jank anyway. Native UI platforms let you build smooth UI without having to reason about multiple threads.
Explain the thread. Threaded effects may be essential to reliable 60fps in a 'write once run anywhere' platform - multiple browsers, huge device scale from watches to desktops. It's already too hard to get rock-solid 60fps on the web (especially with extensive composition), threaded effects are a fast subset that forms the well-lit path.

We've been debating this for over a year within Chrome, and at some length with the other vendors. Most recently at TPAC where the Safari and IE teams said UIWorker was the only option of the two that they would consider.

more CSS features like "scrolling through time". Not compatible with "extensible" vision, but still an important part of the overall solution: simple to use for most common scenarios, will be shipped in other browsers. Ideally we'd figure out how to trivially implement this using one of the above primitives. "snap points" also fits here.

This is all we need for scroll linked effects, and half decent versions of scroll customization effects.

5 of 15

Scroll customization

6 of 15

7 of 15

Design

Here's exactly what this means.

sort of

8 of 15

scroll-delay

‘scroll-delay’

Value: none | � | [ start-touch || wheel-event || scroll-event ]

Initial: none

Applies to: all elements

Inherited: no

UA style sheet:

html { scroll-delay: start-touch wheel-event }

Bug 347272

Fundamental tradeoff between control and performance. The developer should get input into that tradeoff rather than the browser choosing one mode for all scenarios. Even when the main thread isn’t pefectly clean, jank feels much better than unsynchronized movement.

Today each scroll frame blocks on wheel event handlers - eg. maps can customize to do zooming instead of scrolling.

But for touch, it's only at the very start that the page can block scrolling.

Scroll events are delivered async at some point after the scroll.

Scroll-delay is a CSS property that enables components to override which of these things should block scrolling.

When scroll starts, take the union of ALL delay values from the activated node up to the root

Not inherited to avoid expensive cascade if it's toggled on the document

Browser can always over-delay - so in chromium's current compositor architecture, we'll track one scroll-delay per WebLayer

implementation just started, aiming for m41

Also requires paying back code debt for main thread scrolling: fractional scroll offsets, top control hiding, overscroll.

9 of 15

UIWorker

See Ian Vollick's talk

(1:15 - Pacific Ocean)

10 of 15

beforescroll

Element.prototype.scroll = function(scrollState) {� var dx, dy;� if (scrollState.deltaY && this.canScrollY) {� if (scrollState.deltaY > 0) {� dy = Math.min(scrollState.deltaY, � this.scrollHeight - this.scrollTop);� } else {� dy = Math.max(scrollState.deltaY, � -this.scrollTop);� }� this.scrollTop += dy;� }� if (scrollState.deltaX && this.canScrollX) { … }� scrollState.consumeDelta(dx, dy);�}

Bug 416862

11 of 15

beforescroll

Element.prototype.distributeScroll = function(scrollState) {� scrollState.popScrollChain().distributeScroll(scrollState);� this.scroll(scrollState);�}

12 of 15

beforescroll

document.scroll = function(scrollState) {� // Handle top controls� scrollState.consumeDelta(0, topControls.scroll(scrollState.deltaY));� if (scrollState.inInertialPhase || scrollState.isEnding)� topControls.snap();�� Element.prototype.scroll(scrollState); // "super" in ES6�� // Handle overscroll� if (scrollState.deltaX || scrollState.deltaY)� overscrollEffect.scroll(scrollState);�}

13 of 15

Demos

Require custom build

(blink side, chromium side) with beforescroll

Snap Points

Pull To Refresh

14 of 15

Q&A

Discussion: input-dev@chromium.org

15 of 15

beforescroll - obsolete DOM event

Element.prototype.onbeforescroll = function(evt) {� var dx, dy;� if (evt.deltaY && this.scrollsOverflowY) {� if (evt.deltaY > 0) {� dy = Math.min(evt.deltaY, this.scrollHeight - this.scrollTop);� } else {� dy = Math.max(evt.deltaY, -this.scrollTop);� }� this.scrollTop += dy;� }� if (evt.deltaX && this.scrollsOverflowX) { … }� evt.consumeDelta(dx, dy);�}