type- Type
"auto" | "always" | "scroll" | "hover"- Default
"hover"- Description
- When the scrollbar is visible.
Components / Layout
Scroll Area
சுருள் பகுதி
Scroll Area provides a custom-styled scrollable container with a consistent scrollbar that matches the design system across all browsers and platforms.
சுருள் பகுதி அனைத்து உலாவிகளிலும் சீரான தோற்றத்துடன் தனிப்பயன் உருட்டக்கூடிய கொள்கலனை வழங்குகிறது.
Vertical scroll
Component preview
Districts listமாவட்டங்கள் பட்டியல்Horizontal scroll
Component preview
Service tags horizontal scrollசேவை குறிச்சொல் கிடைமட்ட சுருள்Structure
Anatomy
4 parts documented for implementation and review.
1
ScrollArea
சுருள் பகுதிrequired<div>Root container that replaces native scrollbar with custom styled one. Set explicit height (h-*) or max-height to enable scrolling. Uses overflow-hidden on root.
2
Viewport
திரைrequired<div>Internal scrollable viewport wrapping your content. Takes full width and constrained height from parent. Supports vertical and horizontal scrolling via orientation prop.
3
Scrollbar
சுருள் பட்டை<div>Custom thin scrollbar track. Visible on hover/scroll, auto-hides otherwise. Track is transparent, uses 8px width for comfortable drag interaction.
4
Thumb
கட்டை விரல்<div>Draggable thumb element with bg-border color and rounded-full. Size automatically proportional to content/viewport ratio. Provides smooth scroll-position feedback.
API
Props
scrollHideDelay- Type
number- Default
600- Description
- ms before scrollbar hides after scroll stops.
className- Type
string- Default
- -
- Description
- Set h-* for vertical scrolling. Add whitespace-nowrap for horizontal.
| Prop | Type | Default | Description |
|---|---|---|---|
type | "auto" | "always" | "scroll" | "hover" | "hover" | When the scrollbar is visible. |
scrollHideDelay | number | 600 | ms before scrollbar hides after scroll stops. |
className | string | - | Set h-* for vertical scrolling. Add whitespace-nowrap for horizontal. |
Best practices
Set an explicit height for vertical scrolling
செங்குத்து சுருளுக்கு வெளிப்படையான உயரம் அமைக்கவும்
ScrollArea needs a fixed height (h-48, h-64, max-h-96) to constrain the content and enable scrolling — without it, the container expands to full content height.
ScrollArea உள்ளடக்கத்தை கட்டுப்படுத்தவும் சுருளை இயக்கவும் நிலையான உயரம் (h-48, h-64) தேவைப்படுகிறது — இல்லாமல், கொள்கலன் முழு உள்ளடக்க உயரத்திற்கு விரிவடைகிறது.
Don't use ScrollArea for content that fits the viewport
திரையில் பொருந்தும் உள்ளடக்கத்திற்கு ScrollArea பயன்படுத்தாதே
If the content is short enough to display without scrolling, don't wrap it in a ScrollArea — the custom scrollbar and overflow hidden adds unnecessary complexity.
சுருளில்லாமல் காட்டப்படும் அளவு உள்ளடக்கம் குறைவாக இருந்தால் ScrollArea-வில் சுற்றாதே — தேவையற்ற சிக்கலை சேர்க்கிறது.
Add pb-3 to horizontal scroll containers for scrollbar clearance
சுருள் பட்டைக்கான இடம் ஒதுக்க கிடைமட்ட சுருளில் pb-3 சேர்க்கவும்
When using horizontal ScrollArea, add padding-bottom (pb-3) to the inner container so the custom scrollbar doesn't overlap the content.
கிடைமட்ட ScrollArea பயன்படுத்தும்போது, தனிப்பயன் சுருள்பட்டை உள்ளடக்கத்தை மூடாமல் இருக்க உள் கொள்கலனில் pb-3 சேர்க்கவும்.
Don't nest ScrollArea inside another ScrollArea
ஒரு ScrollArea-க்குள் மற்றொரு ScrollArea வைக்காதே
Nested scroll containers create confusing scroll traps — users can't tell which container will respond to their scroll gesture.
உள்ளமைக்கப்பட்ட சுருள் கொள்கலன்கள் குழப்பமான சுருள் பொறிகளை உருவாக்குகின்றன — பயனர்களுக்கு எந்த கொள்கலன் அவர்களின் சுருள் சைகைக்கு பதிலளிக்கும் என்று தெரியாது.