Scroll bar

A scrollbar is an interaction technique in which continuous content can be scrolled in a predetermined direction (up, down, left, or right), even if only a fraction of the content can be seen on a device's screen at one time.

Usage

Use scrollbars:

When more content can fit on a screen or in a container than can be shown initially.
To allow users to view the whole content available on a page
To allow users to navigate the page in a predetermined direction

Do not:

Insert a scrollbar if a page’s whole content can be viewed by the user at one time
Use both a vertical and horizontal scrollbar for the same element

Types

The Cegid Design System includes two types of scrollbars depending on their orientation.

Vertical scrollbars Vertical scrollbars are used to navigate pages and content from top to bottom or bottom to top.

Horizontal scrollbars Horizontal scrollbars are used to navigate pages and content from left to right or right to left.

Anatomy and content

Essentially a scroll bar is a thick line which constitutes a visual indicator for the user that the page or menu (or other) can be scrolled

Behaviour and interaction

A scrollbar can have one of the following states: resting, hovered, dragged.
A scrollbar can have one of the following orientations: vertical or horizontal.

Responsiveness and density

The standard properties for a vertical scrollbar are the following:

Width: 8px
Height: variable
Radius: 4

The standard properties for a horizontal scrollbar are the following: