ناحیه اسکرول (ScrollArea)

معرفی

کامپوننت ScrollArea یک ناحیه اسکرول سفارشی است.

چه زمانی استفاده کنیم:

• برای لیست‌ها و محتوای طولانی که در فضای محدود باید اسکرول شوند
• وقتی نیاز به scrollbar سفارشی با ظاهر یکسان در همه مرورگرها دارید
• برای sidebar، منوها و پنل‌های فیلتر با محتوای طولانی

چه زمانی استفاده نکنیم:

• برای اسکرول صفحه اصلی — از overflow-y-auto روی container استفاده کنید
• وقتی scrollbar پیش‌فرض مرورگر کافی است

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

import { ScrollArea } from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      {Array.from({ length: 50 }).map((_, i) => (
        <div key={i}>آیتم {i + 1}</div>
      ))}
    </ScrollArea>
  )
}

Props

ScrollArea

ScrollBar

راهنمای استفاده

دسترسی‌پذیری

• اسکرول‌بارهای سفارشی برای صفحه‌خوان‌ها مخفی هستند (aria-hidden)
• محتوا با کیبورد قابل اسکرول است
• از @radix-ui/react-scroll-area به عنوان پایه استفاده می‌شود

کامپوننت‌های مرتبط

• Sidebar — اگر نیاز به sidebar با اسکرول داخلی دارید، Sidebar از ScrollArea به صورت داخلی استفاده می‌کند
• Carousel — اگر نیاز به ناوبری اسلایدی با دکمه‌های قبل/بعد دارید، از Carousel استفاده کنید