FAB and Scroll Behaviours

[tigerhawkvok]

The FAB should have an option to autohide on a fixed scrolldown, like Android designs. This would greatly enhance the usefulness of FABs (especially as FABs) on mobile devices, without needing to have homebrewed solutions

I'd propose the attribute autoHideOnScroll, with the following behaviour:

• default: false

• values: Either boolean true/false ( = always/never), or controlled vocabulary false (never), auto (always), or breakpoint value, eg, xs, sm, or md (that size and smaller) (roughly as Bootstrap's)

• If the FAB is not set to position: sticky or position: fixed: This has no effect

• If the FAB is showing and the user scrolls down: The FAB slides down and hides. As per Google Design Specs, behaviour on scrolls is good UX. Here, they talk about a toolbar transforming into a FAB, but the same idea applies:

  A toolbar that disappears on scroll is particularly useful for screens where the full toolbar is needed upon initial entry or while at the top or bottom of a long list. This saves screen real estate when the user has signaled through scrolling that they’re interested in looking at the main content.

• If the FAB is not showing and the user scrolls up The FAB slides into view to its original position

Examples: