wiki:Scrolling

Scrolling

The scrolling architecture is unexpectedly complex, because it's feature-rich, and required to provide smooth scrolling independent of main thread work in as many situations as possible.

Scrollable areas

The ScrollableArea base class represents a region that is scrollable. It's the base class for ScrollView, RenderLayer (for overflow scroll) and for list rendering.

ScrollableArea provides some basic geometry info and functionality for scrolling snapping(?). It's only usable from the main thread.

Scrolling features

Momentum

After a swipe on the trackpad or iOS screen, the content continues to scroll for a while before decelerating to a stop. This is implemented outside of WebKit, by synthetic mouse wheel events on macOS, and by UIScrollView on iOS.

Rubber-banding ("bouncing")

Rubber-banding is what happens when you reach the extent of a scrollable area. On macOS and iOS, you get a bouncing effect. This is implemented by ScrollController on macOS, and by native UIScrollViews on iOS. Note that while pulling down, the scroll position becomes negative. We expose these negative values to web content, and pages sometimes get confused by them.

Latching

Latching describes the fact that during a single scroll interaction, only one scrollable area moves. If, in one gesture, you hit the scrollable extent, we don't start scrolling the containing scroller in that gesture. Instead, we'll rubber-band, and the user has to start a new gesture to get the enclosing scroller to scroll.

Scroll snapping

Scroll-snapping is a [CSS feature https://www.w3.org/TR/css-scroll-snap-1/] that allows authors to make a scroller have paging behavior, or anchoring to specific elements. It applies to both page and overflow scrolling.

Touch-action

The [touch-action https://w3c.github.io/pointerevents/#the-touch-action-css-property] CSS property determines whether touch input MAY trigger default behavior supplied by user agent. It's impact on scrolling is that it may cause scrolling to lock to an axis.

Scrolling and RTL

In RTL documents, scroll position is not a simple positive value. Documents have a scroll origin that is at the top left of the initial containing block, and the scroll position describes the offset of that point from the top left of the viewport (this is a simplification

Coordinated ("async") scrolling

Non-fast-scrollable regions

ScrollingCoordinator

The scrolling trees

ScrollingStateTree

Tree structure, frame boundaries

Node unparenting and reparenting

ScrollingTree

Last modified 7 months ago Last modified on Feb 17, 2019 4:32:58 PM