You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: scroll-customization-api/UseCases.md
+12-10
Original file line number
Diff line number
Diff line change
@@ -3,19 +3,28 @@ The [Composited Scrolling](https://github.com/w3c/css-houdini-drafts/blob/master
3
3
4
4
Hidey bars
5
5
----
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
8
9
- scrolling up, the bar animates in with a timed animation. It's position is relative to its container at this point.
9
10
- When a scroll operation ends (eg. fingers lifted from touchpad), may animate to either fully shown or fully hidden
10
11
- 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
11
14
12
15
Rubber banding
13
16
----
14
17
- scroll is normal until it hits limits (input scroll amount -> output scroll amount)
15
18
- after that point, scroll output is a fraction of the input (input * factor -> output)
16
19
- upon release, animate back to limit
17
20
- 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)
19
28
20
29
Pull to refresh
21
30
----
@@ -50,13 +59,6 @@ Re-targeting scrolling
50
59
- A scroll occurring over one point in the document is redirected to cause scrolling somewhere else.
51
60
- 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.
52
61
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
-
60
62
Disable scroll chaining
61
63
-----
62
64
- Ability for an element to prevent scrolling from propagating up to an ancestor
0 commit comments