Lead: Femi Status colour Yellow title ongoing
| Table of Contents |
|---|
Description
...
Choose the appropriate type (as defined above) according to the amount of content you need to display and the content area available. All default browser scroll behaviours should be enabled by default. Operating system and browser defaults such as scroll inertia, scroll wheel support, gesture support and any OS user customisations should all behave as factory designed.
| Note |
|---|
Currently only webkit based web browsers (such as Chrome & Safari) fully support native scrollbar custom styling to the degree required to conform to our visual design guidelines. It is therefore recommended to leave all non webkit browsers at their native scrollbar visual design language (using the CSS Overflow property) in order to aid consistency in behaviour and accessibility, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation. |
...
These are the essential usability guidelines for scrolling and scrollbars:
Content
- Display all important information above the fold. Users often decide whether to continue or leave based on what they can see without scrolling.
Placement
- Always offer a scrollbar if an area has scrolling content. Don't rely on auto-scrolling or on dragging, which people might not notice.
- Hide scrollbars entirely if all content is visible. If people see a scrollbar, they assume there's additional content and will be frustrated if they can't scroll.
Default
- Comply with the default operating system standards in order to maintain platform familiarity. All default browser scroll behaviours should be enabled by default. Operating system and browser defaults such as scroll inertia, scroll wheel support, gesture support and any OS user customisations should all behave as factory designed.
States
There are no focused or disabled states for scroll as those states are handled by the parent component in which the scroll is attached.
...
| Input device | Discrete scroll | Continuous scroll |
|---|---|---|
| Keyboard |
|
|
| Mouse |
|
|
| Trackpad |
|
|
...