← Back to Components

Scroll

Custom scrollbar styling that follows the Praxia Design System with consistent colors, hover states, and responsive behavior across all browsers.

Scrollbar States

Custom scrollbars follow the Figma design with gray-200 (#d0d3d4) default state and gray-500 (#9ea2a2) hover state.

Default State

Scrollbar appears in gray-200 color
  • Scrollable item 1
  • Scrollable item 2
  • Scrollable item 3
  • Scrollable item 4
  • Scrollable item 5
  • Scrollable item 6
  • Scrollable item 7
  • Scrollable item 8
  • Scrollable item 9
  • Scrollable item 10
  • Scrollable item 11
  • Scrollable item 12
  • Scrollable item 13
  • Scrollable item 14
  • Scrollable item 15

Hover State

Hover over scrollbar to see gray-500 color
  1. Hover scrollbar item 1
  2. Hover scrollbar item 2
  3. Hover scrollbar item 3
  4. Hover scrollbar item 4
  5. Hover scrollbar item 5
  6. Hover scrollbar item 6
  7. Hover scrollbar item 7
  8. Hover scrollbar item 8
  9. Hover scrollbar item 9
  10. Hover scrollbar item 10
  11. Hover scrollbar item 11
  12. Hover scrollbar item 12
  13. Hover scrollbar item 13
  14. Hover scrollbar item 14
  15. Hover scrollbar item 15

Scrollbar Directions

Scrollbars can be applied to vertical, horizontal, or both directions using utility classes.

Vertical Only

Class: scrollbar scrollbar-y
  • Vertical scroll item 1
  • Vertical scroll item 2
  • Vertical scroll item 3
  • Vertical scroll item 4
  • Vertical scroll item 5
  • Vertical scroll item 6
  • Vertical scroll item 7
  • Vertical scroll item 8
  • Vertical scroll item 9
  • Vertical scroll item 10
  • Vertical scroll item 11
  • Vertical scroll item 12
  • Vertical scroll item 13
  • Vertical scroll item 14
  • Vertical scroll item 15
  • Vertical scroll item 16
  • Vertical scroll item 17
  • Vertical scroll item 18
  • Vertical scroll item 19
  • Vertical scroll item 20

Horizontal Only

Class: scrollbar scrollbar-x
This content is wider than the container and demonstrates horizontal scrolling with custom scrollbar styling. The scrollbar maintains the same visual design and color scheme as vertical scrollbars.

Both Directions

Class: scrollbar scrollbar-both
  • This is a very long list item 1 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 2 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 3 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 4 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 5 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 6 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 7 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 8 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 9 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 10 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 11 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 12 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 13 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 14 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling
  • This is a very long list item 15 that demonstrates both vertical and horizontal scrolling capabilities with custom scrollbar styling

Auto-hide Scrollbar

The auto-hide variant shows scrollbars only on hover, providing a cleaner interface while maintaining usability.

Auto-hide Example

Class: scrollbar scrollbar-auto scrollbar-y
  • Hover over this container to reveal scrollbar
  • Scrollbar automatically hides when not hovering
  • Provides cleaner visual interface
  • Maintains full accessibility and functionality
  • Useful for content-focused areas
  • Reduces visual clutter
  • Still allows keyboard navigation
  • Preserves all scrolling behaviors
  • Scroll down to see more content
  • Perfect for dashboard layouts

Regular vs Auto-hide

Regular Scrollbar (Always Visible)
Regular scroll item 1
Regular scroll item 2
Regular scroll item 3
Regular scroll item 4
Regular scroll item 5
Regular scroll item 6
Regular scroll item 7
Regular scroll item 8
Auto-hide Scrollbar (Hover to Show)
Auto-hide scroll item 1
Auto-hide scroll item 2
Auto-hide scroll item 3
Auto-hide scroll item 4
Auto-hide scroll item 5
Auto-hide scroll item 6
Auto-hide scroll item 7
Auto-hide scroll item 8

Implementation Examples

Real-world usage examples showing how to apply scrollbar styling to different types of content containers.

Navigation Menu

Code Block

/* Apply custom scrollbar styling */
.my-container {
  /* Add scrollbar classes */
  @apply scrollbar scrollbar-y;
  
  /* Container styles */
  height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
}

/* For auto-hide behavior */
.my-clean-container {
  @apply scrollbar scrollbar-auto scrollbar-y;
}

/* Horizontal scrolling */
.my-wide-container {
  @apply scrollbar scrollbar-x;
  width: 100%;
  overflow-x: auto;
}

Data Table

Name Department Email Status
John Doe 1 Engineering john.doe1@company.com Active
John Doe 2 Engineering john.doe2@company.com Active
John Doe 3 Engineering john.doe3@company.com Active
John Doe 4 Engineering john.doe4@company.com Active
John Doe 5 Engineering john.doe5@company.com Active
John Doe 6 Engineering john.doe6@company.com Active
John Doe 7 Engineering john.doe7@company.com Active
John Doe 8 Engineering john.doe8@company.com Active
John Doe 9 Engineering john.doe9@company.com Active
John Doe 10 Engineering john.doe10@company.com Active
John Doe 11 Engineering john.doe11@company.com Active
John Doe 12 Engineering john.doe12@company.com Active