...
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 scroll as these states are handled by the parent component.
State | Scroll |
|---|---|
Regular Vertical |  |
Hover Vertical |  |
Active Vertical |  |
Regular Horizontal |  |
Hover Horizontal |  |
Active Horizontal |  |
...
Scroll interaction is governed by the device, operating system, and browser being used. The default interaction behaviours 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 |
|
|
Mouse |
|
|
Trackpad |
|
|
...
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 Progress Indicator to show that new content will soon appear on the page.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
The scroll component itself cannot be focused via the keyboard. Instead, it must be possible to focus the scrollable content area itself in order for the scroll component to work. Please see the Keyboard & Focus Management Guidelines to ensure that scrollable content areas are properly supported.
...