Skip to content

Commit 01f4f19

Browse files
committed
Tweak scroll customization use cases
1 parent 99381a9 commit 01f4f19

File tree

1 file changed

+12
-10
lines changed

1 file changed

+12
-10
lines changed

scroll-customization-api/UseCases.md

+12-10
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,28 @@ The [Composited Scrolling](https://github.com/w3c/css-houdini-drafts/blob/master
33

44
Hidey bars
55
----
6-
- typically have a different effect depending on the direction of scroll, and depending on whether they are attached to the top or bottom of their scroll area
7-
- e.g. scrolling down the bar moves with the container, and disappears outside the bounds
6+
- Similar to a [Scroll header](https://github.com/w3c/css-houdini-drafts/blob/master/composited-scrolling-and-animation/UseCases.md#scroll-header)
7+
- Typically have a different effect depending on the direction of scroll, and depending on whether they are attached to the top or bottom of their scroll area
8+
- e.g. scrolling down the bar moves with the container, and disappears outside the bounds
89
- scrolling up, the bar animates in with a timed animation. It's position is relative to its container at this point.
910
- When a scroll operation ends (eg. fingers lifted from touchpad), may animate to either fully shown or fully hidden
1011
- Advanced: content may “hide” into a smaller version of itself, that is sticky positioned (e.g. iPhone Safari URL bar)
12+
- Examples:
13+
- Top controls in mobile browsers like Chrome for Android and Mobile Safari
1114

1215
Rubber banding
1316
----
1417
- scroll is normal until it hits limits (input scroll amount -> output scroll amount)
1518
- after that point, scroll output is a fraction of the input (input * factor -> output)
1619
- upon release, animate back to limit
1720
- also should work with a momentum deceleration (if the user has flicked far enough to hit the limits)
18-
Rubber banding
21+
22+
Snap points
23+
----
24+
- Scrolling as normal during the normal scroll phase
25+
- But when the scroll ends (eg. after finger lift), animates to a well-defined boundary
26+
- Example
27+
- [CSS Snap points](https://drafts.csswg.org/css-snappoints/), and earlier [IE/Edge implementation](https://msdn.microsoft.com/en-us/library/windows/apps/hh466031.aspx)
1928

2029
Pull to refresh
2130
----
@@ -50,13 +59,6 @@ Re-targeting scrolling
5059
- A scroll occurring over one point in the document is redirected to cause scrolling somewhere else.
5160
- Eg. GMail does this in conversation view - scroll on the right hand side (which isn't itself scrollable) and they scroll the conversation. They do this by listening for wheel events, but this doesn't work for touch.
5261

53-
Linked scrollers
54-
-----
55-
- Multiple elements are to be scrolled together but possibly at different rates
56-
- Like parallax except not overlapping, use input may occur on any of the linked elements
57-
- One example [here](http://stackoverflow.com/questions/19786080/how-to-synchronize-scroll-between-two-elements-with-different-height). [AV club](http://www.avclub.com/review/weeknd-navigates-trippy-perception-and-pop-reality-224412) also appears to do this.
58-
- Artificial example [here](http://fiddle.jshell.net/kunknown/VVaEq/2/show/)
59-
6062
Disable scroll chaining
6163
-----
6264
- Ability for an element to prevent scrolling from propagating up to an ancestor

0 commit comments

Comments
 (0)