Description

A Scrollbar allows the controlled reveal of extra content which would otherwise not fit within the allocated UI area. Scrollbars can be used within containers of the page layout and also within individual components.

Open

Types

Choose the appropriate type according to the amount of content you need to display and the content area available.

Usage & Behavior

General guidelines

Placement and positioning

• Always offer a scrollbar if an area has scrolling content. Don't rely on auto-scrolling or on dragging, as users may not realise it's an option. The scrollbar provides a visual clue that more content is available.

• Hide scrollbars entirely if all content is visible. If users see a scrollbar, they will assume there's additional content and be frustrated if they can't scroll.

Default state

Comply with the default operating system standards in order to maintain platform familiarity. All default browser scroll behaviors 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.

Content

Display all important information above the fold. Users often decide whether to continue or leave based on what they can see without scrolling.

States

There are no focused or disabled states for scrollbars as these states are handled by the parent component.

State	Scroll

State	Scroll
Regular Vertical	Open
Hover Vertical
Active Vertical
Regular Horizontal
Hover Horizontal
Active Horizontal

Interaction

Scroll interaction is governed by the device, operating system, and browser being used. The default interaction behaviors shouldn't be changed, primarily for conformance and accessibility reasons. The following are the required interaction recommendations common to all.

Best practices

• Avoid scrolling within scrolling.

• Make sure the browser back button works properly in regard to saving the scrollbar position.

• Avoid scroll hijacking. Applications that implement scroll hijacking take control of the scroll and override a basic function of the web browser.

• Use sticky navigation. Long scrolling can make navigation problematic. If the user loses visibility of the navigation menu (for the container, table etc.) when they scroll down, they will have to scroll all the way back to the top to perform an action. Instead, use a sticky (persistently visible) navigation menu to make moving around the app fast and easy.

• Avoid horizontal scrolling when possible.

• Provide visual feedback when loading new content. When using infinite scroll, it needs to be clear to the user that content is being dynamically loaded. Use a Progress Indicator to show that new content will soon appear on the page.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

The scrollbar component itself cannot be focused via the keyboard. Instead, it’s derived from the focus of the page components. Please see the Keyboard & Focus Management Guidelines to ensure that scrollable content areas are properly supported.

Assistive scrolling bindings vary with device, operating system, and browser. Nevertheless, the key bindings described in the Scroll#Interaction section above should be supported as a minimum.

Screen reader support 

As it's recommended to use the native browser scrollbar component, screen reader support is already built in. Users are notified about scrollbars 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 where needed - see the Screen Reader Guidelines.

Design

Code