منطقة تمرير
ScrollAreaمنطقة تمرير في React بأشرطة تمرير منسّقة عبر المتصفّحات للمحور العمودي أو الأفقي أو كليهما. محدودة كما في overflow الأصلي وقابلة للتمرير بلوحة المفاتيح حين تُسمّى.
يحتاج ScrollArea إلى ارتفاع أو عرض محدد ليعمل التمرير، تمامًا كالسلوك الأصلي. مرر aria-label لتسمية المنطقة القابلة للتركيز.
متى تستخدمه
استخدم ScrollArea للوحات المحدودة التي تتمرّر مستقلّةً عن الصفحة: قائمة شريط جانبي، أو قائمة طويلة داخل بطاقة، أو جدول عريض في الشاشات الضيّقة. أعطها ارتفاعًا أو عرضًا ثابتًا كما تفعل مع overflow الأصلي.
للتمرير على مستوى الصفحة، اعتمد على المتصفّح.
أمثلة
الخصائص
الخصائص التي يعرّفها ScrollArea. سمات العنصر الأصلي تمرّ كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
orientation | ScrollAreaOrientation | Which scrollbar(s) to render. Default 'vertical'. | |
viewportRef | react.Ref<HTMLDivElement> | Ref to the scrollable viewport - use for programmatic scrolling. | |
viewportProps | Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> | Extra props forwarded to the viewport element (use viewportRef for the ref).
To drop the extra tab stop when the scrolled content is itself fully focusable
(e.g. a list of links), pass viewportProps={{ tabIndex: -1 }}. | |
aria-label | string | Names the scroll region. Warns (dev only) if neither this nor aria-labelledby is set. | |
aria-labelledby | string | Identifies the element (or elements) that labels the current element. | |
type | "auto" | "always" | "scroll" | "hover" | ||
dir | Direction | ||
scrollHideDelay | number |
إمكانية الوصول
مرّر aria-label أو aria-labelledby لتسمية المنطقة؛ فيصبح منفذ العرض قابلًا للتركيز ويمرّره مستخدم لوحة المفاتيح بمفاتيح الأسهم.
أشرطة التمرير المخصّصة بصرية فقط. يبقى المحتوى داخلها في ترتيب القراءة الطبيعي.