- Guidelines
- React API Reference
ScrollArea provides a scrollable viewport with custom styled scrollbars that integrate with your design system, offering a consistent scrolling experience across different browsers and platforms.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use ScrollArea when you need to contain scrollable content within a fixed viewport while maintaining a consistent scrollbar appearance. |
| Content | Can contain any content that exceeds the defined viewport dimensions. Appropriate for long text, lists, data tables, or nested content. |
| Behavior | Provides smooth, natural scrolling with custom scrollbars that appear when content exceeds the viewport. |
| States | Scrollbars should be visible when scrolling is possible. Consider both vertical and horizontal scrolling needs. |
| Feedback | Scrollbars should provide clear visual feedback about the current scroll position and how much content is available. |
| Examples | Long-form content, code blocks, large data tables, image galleries, lists with many items. |
Best Practices
- Appropriate Sizing: Set a reasonable fixed height and/or width for the ScrollArea component.
- Visual Consistency: Custom scrollbars should match your design system aesthetics.
- Performance: For very large content, consider virtualization or pagination to improve performance.
- Accessibility: Ensure that all scrollable content is navigable via keyboard for accessibility.
- Responsiveness: Consider how scrolling behavior changes across different device sizes.
Do’s and Don’ts
Do
- Use ScrollArea for content that naturally exceeds viewport dimensions. * Ensure scrollbars are visible enough for users to recognize them. * Test keyboard navigation within scroll areas. * Consider both vertical and horizontal scrolling needs.
Don't
- Don’t nest ScrollAreas excessively - it can lead to confusing interaction patterns. * Don’t use for small amounts of content that don’t require scrolling. * Don’t make scrollable areas too small to be usable.
Additional Guidance
- Psychological Impact:
- Reduced Cognitive Load: ScrollArea helps contain complex content in manageable viewports.
- Content Hierarchy: By controlling what content is immediately visible versus what requires scrolling, you can establish content hierarchy.
- Spatial Awareness: Well-designed scrollbars help users maintain awareness of their position within larger content.