Show/hide rules while scrolling must stay consistent
Aliases: hide on scroll · FAB auto-hide · scroll-aware FAB
What it is
Many products tuck the FAB away on scroll down and bring it back on scroll up, briefly yielding occluded content. That show/hide rule has to be the same across the product: same direction, same distance threshold, same motion. Once pages disagree—one always pinned, one gone at the first pixel, one only after half a screen—the FAB stops being a predictable primary and becomes a control that plays hide-and-seek.
Why it happens
The motor system programs the next reach to a location. Part of a FAB’s value is a stable slot. Hiding on scroll makes the target blink in time: the hand goes to the lower right, the control has already tucked away, the finger hits the newly exposed row—an accidental activation or a dead press. Next time the person hesitates and searches first. Inconsistency is worse than “always hide,” because neither strategy can form: one cannot rely on “it is always there” nor on “it always yields while I scroll.” If the threshold is speed-sensitive (slow scroll keeps it, fast scroll hides it), two similar scrolls from the same person yield opposite results and the cause is unlearnable. Motion that slides the FAB off one edge and back in from another also breaks the place mapping.
Studying it
Have people alternate “read the next item” and “create” in a long list. Compare four policies: never hide; hide down / show up with a fixed threshold; different rules per page; hide by speed.
Independent variables: show/hide policy, whether the threshold is perceptible, whether pages agree. Dependent variables: empty reaches, accidental hits on newly exposed content, time to find the FAB, rated predictability.
Short lab lists rarely trigger hiding. Content must run well beyond a viewport, and scrolling speed must be free, or the speed-sensitive condition cannot be measured.
Where it stops holding
Short pages and empty states never scroll, so the rule never fires; keep the FAB present. A horizontal gallery that inherits a vertical rule will flicker during sideways swipes. In long-form reading, create is rare and hiding can be aggressive; in an inbox, compose is frequent and hiding should be conservative. When a reduce-motion setting is on, do not use a slide to announce show/hide; snap, or do not hide.
Applying it
- Pick one product-wide rule (for example: tuck after a fixed downward distance, reappear immediately on upward scroll) and put it in the component, not in each feature page.
- Do not change the dock corner while hiding; it must return to the same point.
- Offer a no-animation show/hide when reduce-motion is set, or keep the FAB always visible under that setting.
- Verify by asking people on three different list pages to “scroll down, then create.” If the FAB is missing on one page, or a reach hits a newly exposed row, the rule is inconsistent or unlearnable.