When to Use
Example: flavor catalog — scrollable list
- Ensuring a consistent scrollbar appearance across browsers and OS themes
- Scrollable panels, sidebars, or content areas where the default scrollbar clashes with the design
- Dropdown menus or modal content that overflows its container
- Don't completely hide the scrollbar — users should always know content is scrollable
Usage Guidelines
DO
Apply the custom scrollbar style consistently to all scroll areas. Keep the scrollbar style subtle and unobtrusive
Don’t
Don't completely hide the scrollbar — users need to know content is scrollable
DO
Ensure the thumb height is sufficient to clearly indicate scroll position. Consider touch scroll momentum on mobile
Don’t
Don't use a thumb that's too thin (less than 6 px). Don't use overly bright or high-contrast scrollbar colors. Don't modify scrollbar behavior logic, only its visual style
Interaction Behavior
| State | Description |
|---|---|
| Mouse wheel | Content scrolls, thumb position updates synchronously |
| Drag thumb | Directly positions scroll position |
| Click track | Page-jumps to clicked position |
| Hover | Thumb color deepens from --ds-color-grey-state-default to --ds-color-grey-state-hover |
| Touch scroll | Content follows finger with inertial scrolling |
Accessibility
| Requirement | Implementation |
|---|---|
| Keyboard scrolling | Set tabindex="0" on scroll container so it can be focused and scrolled with arrow/Page keys |
| Assistive technology | Custom styles do not affect native scrolling functionality for assistive tech |
| Content reachability | Ensure all content is accessible via keyboard scrolling |