Example: flavor catalog — scrollable list
Apply the custom scrollbar style consistently to all scroll areas. Keep the scrollbar style subtle and unobtrusive
Don't completely hide the scrollbar — users need to know content is scrollable
Ensure the thumb height is sufficient to clearly indicate scroll position. Consider touch scroll momentum on mobile
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
| 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 |
| 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 |