Lead: Femi ONGOING
Description
Scroll is a user interaction component used to allow for the reveal of extra content which would otherwise be unable to be displayed within the existing UI real estate. They can be used within containers of the page layout and also within individual components.
Types
| Type | Usage |
|---|---|
| Fixed Scroll | When a fixed amount of content is loaded into a viewable container or component that is not large enough to display all at once, a horizontal or vertical scrollbar is shown to enable the remaining content to be moved into view. |
| Infinite Scroll | When a large undefined amount of content is available for a viewable container or component that is not large enough to display all at once, a horizontal or vertical scrollbar is shown to enable more content to be continually loaded into view. |
| Fixed Scroll + Pagination | When a large defined amount of content is available for a viewable container or component that is not large enough to display all at once, a list of page numbers is shown to enable discreet pages of content to be loaded into the scrollable view. |
Usage & Behaviour
Use the appropriate type depending on usage types defined above. 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 user customisations should all behave as factory designed.
General guidelines
There are five essential usability guidelines for scrolling and scrollbars:
- 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 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.
- Comply with the default operating system standards in order to maintain platform familiarity.
- Avoid horizontal scrolling as much as possible to improve user efficiency.
- Display all important information above the fold. Users often decide whether to continue or leave based on what they can see without scrolling.
States
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
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 in order to aid accessibility and consistency, rather than attempting to re-implement scrollbars across each environment. Our implementation below follows this recommendation.
Interaction
Scroll interaction is governed by the chosen device, operating system and browser the application is running on. It is advised that those default interaction behaviours be unaltered primarily for conformance and accessibility reasons.The following are the ineractions recommended and common to all.
| Input device | Discrete scroll | Continuous scroll |
|---|---|---|
| Keyboard |
|
|
| Mouse |
|
|
| Trackpad |
|
|
Best practices
For best results all default browser scroll behaviours are enabled by default. Operating system and browser defaults such as scroll inertia, scroll wheel support, gesture support and any user customisations should all behave as factory designed. For more best practices, see below.
Avoid scroll hijacking - Applications that implement scroll hijacking take control of the scroll and override a basic function of the web browser. Scroll hijacking is best avoided because the user no longer has full control of the page scroll and thus is unable to predict its behaviour. User’s expectation of a website’s scrolling interaction shouldn’t be destroyed for the sake of narrative experience.
Make sure back button works properly - When users follow a link, and then click the Back button, they expect to return to the same spot on the original page. Traditionally, using a browser’s back button will generally set the scroll position back to the previous position rather than to the top of the page. However, some modern development frameworks do not offer this functionality by default. Losing their previous position forces users to have to scroll through content they have already seen and manually find their previous position, hence endeavour to make sure this feature is enabled.
Use sticky navigation - Long scrolling can make navigation problematic for users: if the navigation bar (container menu, table menu etc) loses its visibility when users scroll down, they will have to scroll all the way back up when deep within the page or table. The solution for this problem is a sticky navigation menu: it’s best to keep the navigation persistently visible, so that navigating to different areas of the app is fast and easy for users.
Provide visual feedback when loading new content - Visibility of the system’s status remains among the most important principles in user interface design. When using the infinite scroll type, in which your app dynamically loads content, users need a clear sign that the application is doing this. Keep them informed; use a progress indicator to show that new content is loading and will soon appear on the page.
Accessibility compliance
In general each component should be A11y complied, please follow the 3 guidelines linked below.
Focus management
The scroll component itself is not keyboard focusable. Instead, it is the scrollable content area itself that is required to be focusable in order for the scroll component to work. Please see the general guidelines described in Keyboard & Focus Management Guidelines to make sure the scrollable content areas are properly supported.
Assistive scrolling bindings vary with device, operating system and browser but the key bindings described in the 'Interaction' section above should be supported as a minimum:
Screen reader support
As our recommendation is the use of the native browser scrollbar component, screen reader support is already built in. Users are notified about the existence of a scrollbar on the page when they encounter a scrollable area with the 'overflow' property defined as 'auto' or 'scroll'. Make sure the scrollable area itself also supports screen readers for content or behaviour where needed - see Screen Reader Guidelines
Design
| Zeplin link | Screen thumbnail |
|---|---|
 |