منطقة تمرير
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 لتسمية المنطقة. عندها يقبل منفذ العرض التركيز، ويمرره مستخدم لوحة المفاتيح بمفاتيح الأسهم.
أشرطة التمرير المخصصة بصرية فقط. يبقى محتوى المنطقة في ترتيب القراءة الطبيعي.