💠 Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Usage

The Scroll Area component enhances the native scrolling experience by providing a customizable, consistent, and cross-browser-compatible scrollbar.

It allows designers and developers to style the scrollbar to match the application's design language, offering better visual integration and user experience than the default browser scrollbar.

When to use

• Custom styling: Use a Scroll Area when the default browser scrollbar does not fit the design aesthetic of your application or when a more consistent cross-browser look is required.
• Enhanced user experience: Employ a Scroll Area to provide users with a more visually appealing and potentially more intuitive scrolling interface.
• Limited space: Utilize a Scroll Area in interfaces where space is at a premium, such as modals or side panels, and the default scrollbar takes up too much space or looks out of place.
• Content-heavy applications: For applications that handle a lot of content and require extensive scrolling, a customized Scroll Area can improve the visual flow and readability.

Avoid using a Scroll Area if it significantly alters the default scrolling behavior users expect or if it negatively impacts accessibility or usability. Be cautious not to over-customize to the point where the functionality of the scrollbar is obscured or its use is not intuitive. The primary goal should always be to enhance the user experience, not just the visual design.

Examples

Default

Horizontal

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

In most cases, it's best to rely on native scrolling and work with the customization options available in CSS. When that isn't enough, ScrollArea provides additional customizability while maintaining the browser's native scroll behavior (as well as accessibility features, like keyboard scrolling).

Keyboard interactions

Scrolling via keyboard is supported by default because the component relies on native scrolling. Specific keyboard interactions may differ between platforms, so we do not specify them here or add specific event listeners to handle scrolling via key events.