Scroll bar

Usage

Scrollbar should be used on a container within a section of a page when it's contents are too large to fit in the container. Scrollbar can be horizontal or vertical and can vary in size according to the percentage of the content that is visible.

Horizontal scroll can be used to control the horizontal list of items, or to display the table content. Vertical scroll can be used to contain overflowing content of a page or module, or inside interactive component such as a dropdown menu.

Best Practices

• Make sure scrollbar is always visible on a module it controls

• Use a scrollbar to save space for long lists (for example in dropdown menu)

• Scrollbar handle should always be easily findable, and accessibility should be ensured by using the arrow keys or hand gestures on mobile devices to view the scrollable area

• If possible, avoid the “false bottom” of the content when using scrollbars; users should always see a visual cue that there is information below the fold

Style

Ideally, the scrollbar should meet the following:

• Scrollbar colour: Grey Base

• Background colour: Grey L80

• Scrollbar width: 6px