Skip to content

Commit ab76eb5

Browse files
committed
Add first draft of scroll customization explainer
1 parent 653248c commit ab76eb5

File tree

1 file changed

+23
-0
lines changed

1 file changed

+23
-0
lines changed

scroll-customization-api/explainer.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Scroll customization explained
2+
3+
Many native mobile applications have [UI effects that interact with scrolling](https://github.com/w3c/css-houdini-drafts/blob/master/scroll-customization-api/UseCases.md), for example snapping the scroll position to image boundaries in an image carousell. To do this web developers must [resort](http://cubiq.org/iscroll-5) to re-implementing all of scrolling on top of raw input events. There are four major drawbacks with such an approach:
4+
- Threaded scrolling is disabled, so any main thread work >16ms will lead to dropped frames.
5+
- Accessibility is often broken, as the browser (and any assistive technologies) have no idea that scrolling is occurring.
6+
- Such components cannot compose properly with other scrollers (native or JS), for example for proper scroll chaining.
7+
- It is very difficult or impossible to re-implement browser scrolling behavior exactly (on every platform), so such scrolling ends up not feeling/looking right to the user (eg. fling physics).
8+
9+
The fundamental problem here is that scrolling on the web is a big "magical" black-box. In other UI frameworks scrolling is usually implemented as a library (with extensibility points) on top of primitives. The goal of the Houdini Scroll Customization proposal is to break open this black box to make scrolling on the web [extensible](https://extensiblewebmanifesto.org/).
10+
11+
## Threaded scrolling
12+
13+
Modern browsers implement scrolling off of the main JavaScript thread to ensure that scrolling can be serviced reliably at 60fps. This proposal builds on [Compositor Worker](https://github.com/ianvollick/css-houdini-drafts/blob/master/composited-scrolling-and-animation/Explainer.md) to permit customizations that typically run in-sync with scrolling. In the future we may also want high performance applications to be able to opt-out of threaded scrolling and also use a variant of these APIs from the main JavaScript execution context.
14+
15+
## ScrollIntent - a primitive abstraction
16+
17+
In order to explain scrolling, we need to introduce an abstraction that sits above raw input (eg. `wheel` and `touchmove` events) but below the effect that scrolling has (changing `scrollTop` and generation of `scroll` events). `ScrollIntent` represents the user's desire to scroll by a specific number of pixels (as well as additional details about the scroll).
18+
19+
TODO: Picture showing touch/wheel/keyboard input -> scroll intent -> tagetting logic -> Element::applyScrollIntent -> set scrollTop
20+
21+
## Examples
22+
23+
TODO

0 commit comments

Comments
 (0)