...
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.
...
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 Guidelinesit’s derived from the focus of the page components. Please see the /wiki/spaces/UX/pages/308969693 to ensure that scrollable content areas are properly supported.
...
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/wiki/spaces/UX/pages/308248620.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
...