ScrollView
Custom scrollable containers with styled scrollbars, auto-hide behavior, and scroll indicators.
Vertical Scroll
Scrollable container with a thin custom scrollbar.
html
Alex Johnson
alex@example.com
Sarah Chen
sarah@example.com
Marcus Lee
marcus@example.com
Emily Davis
emily@example.com
David Kim
david@example.com
Lisa Wang
lisa@example.com
Ryan Patel
ryan@example.com
Mia Torres
mia@example.com
<div class="uc-scroll uc-h-64 uc-p-4">
<div class="uc-space-y-3">
<div class="item">...</div>
<div class="item">...</div>
</div>
</div>Horizontal Scroll
Drag to scroll horizontally by holding the left mouse button.
Mountain Lake
Nature photography
Forest Path
Landscape series
Sunset Beach
Travel collection
City Lights
Urban exploration
Ocean View
Seascape shots
Desert Dunes
Aerial collection
Both Directions
Container that scrolls in both directions for large content areas.
| ID | Name | Department | Role | Salary | |
|---|---|---|---|---|---|
| 001 | Alex Johnson | alex@co.com | Engineering | Senior Dev | $120,000 |
| 002 | Sarah Chen | sarah@co.com | Design | Lead Designer | $105,000 |
| 003 | Marcus Lee | marcus@co.com | Marketing | Manager | $95,000 |
| 004 | Emily Davis | emily@co.com | Engineering | Frontend Dev | $98,000 |
| 005 | David Kim | david@co.com | Product | PM | $110,000 |
| 006 | Lisa Wang | lisa@co.com | Engineering | Backend Dev | $115,000 |
| 007 | Ryan Patel | ryan@co.com | Sales | Account Exec | $88,000 |
| 008 | Mia Torres | mia@co.com | HR | HR Manager | $92,000 |
Hidden Scrollbar
Scrollable content with no visible scrollbar. Drag to scroll.
All
Design
Development
Marketing
Product
Research
Analytics
Sales
Support
Operations
Auto-hide Scrollbar
Scrollbar that only appears on hover for a cleaner look.
Project Brief.pdf
2.4 MB
Design System.fig
18.7 MB
API Documentation.md
156 KB
Wireframes.sketch
34.2 MB
Sprint Planning.xlsx
890 KB
Brand Guidelines.pdf
5.1 MB
User Research.pdf
3.3 MB
Roadmap Q1.pptx
12.8 MB
With Scroll Indicators
Fade effect on edges indicating more content is available.
January
Revenue: $12,400
February
Revenue: $15,200
March
Revenue: $18,900
April
Revenue: $14,600
May
Revenue: $21,300
June
Revenue: $19,800
July
Revenue: $23,100
August
Revenue: $20,500
September
Revenue: $17,600
October
Revenue: $22,400
November
Revenue: $25,100
December
Revenue: $28,700
Mon
Tue
Wed
Thu
Fri
Sat
Sun
API Reference
All CSS classes available for the ScrollView component.
| Class | Type | Description |
|---|---|---|
uc-scroll |
Base | Scrollable container with thin custom scrollbar |
uc-scroll-hidden |
Variant | Scrollable container with no visible scrollbar |
uc-scroll-autohide |
Variant | Scrollbar that only appears on hover |
uc-overflow-x-auto uc-overflow-y-hidden |
Modifier | Horizontal-only scroll direction |
uc-h-64 |
Size | Fixed height for vertical scroll container |
uc-h-48 |
Size | Shorter fixed height variant |
uc-h-56 |
Size | Medium fixed height variant |
uc-drag-scroll |
Modifier | Enables drag-to-scroll behavior via JavaScript |
uc-scroll-indicator |
Modifier | Vertical scroll fade indicator container |
uc-scroll-indicator-h |
Modifier | Horizontal scroll fade indicator container |
uc-show-top |
State | Shows top fade indicator (vertical) |
uc-show-bottom |
State | Shows bottom fade indicator (vertical) |
uc-show-left |
State | Shows left fade indicator (horizontal) |
uc-show-right |
State | Shows right fade indicator (horizontal) |
Accessibility
Keyboard and screen reader support.
| Feature | Details |
|---|---|
| Role | Scrollable container should have tabindex="0" for keyboard access |
| Label | Add aria-label describing the scrollable area content |
| Keyboard | Arrow keys scroll the content when container is focused |
| Indicators | Scroll indicators should be aria-hidden="true" as they are decorative |