Versions Compared

Version Old Version 37 New Version Current
Changes made by

Femi

Ayelet Servi

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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.

...

Types

Type

Usage

Fixed Scrollbar

When a fixed amount of content is loaded into a container or component that is not large enough to display it all at once, a horizontal or vertical scrollbar enables the remaining content to be moved into view.

Infinite Scrollbar

When a large undefined amount of content is available for a container or component that is not large enough to display it all at once, a horizontal or vertical scrollbar enables more content to be dynamically loaded into view.

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

...

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

State

Scroll

Regular Vertical

Image Removed
Image Added

Hover Vertical

Image Removed
Image Added

Active Vertical

Image Removed
Image Added

Regular Horizontal

Image Removed
Image Added

Hover Horizontal

Image Removed
Image Added

Active Horizontal

Image Removed
Image Added

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.

Input device

Discrete scroll

Continuous scroll

Keyboard

  • Focus on (scrollable area)

    • + Up & Down keys

    • + PageUp & PageDown keys

    • + Home & End keys

  • Focus on (scrollable area) + Hold Up & Down keys

Mouse

  • Click on (scroll component - above or below scrollbar handle)

  • Click on (scrollbar handle) + drag

  • Hover over (scrollable area) + scroll wheel

Trackpad

  • Click on (scroll component - above or below scrollbar handle)

  • Click on (scrollbar handle) + drag gesture

  • Hover over (scrollable area) + scroll gesture

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.

...

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.

...

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 /wiki/spaces/UX/pages/308248620.

Design

Zeplin link

Screen thumbnail

https://zpl.io/bo9RLGX

Image Modified

Code

Note

A scrollbar is enabled by applying the appropriate CSS Overflow property value to a content area.

...