ScrollArea
Нативна scroll-область із edge affordance, подіями меж і програмним API.
Приклад
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
ariaLabel | string | "Прокручувана область" | Доступне ім'я області. Її оголошено як `region`, тож ім'я обов'язкове. |
orientation | verticalhorizontalboth | "vertical" | Вісь прокрутки. `both` вмикає обидві одразу. |
tabindex | number | 0 | tabindex області. Нуль лишає її доступною з клавіатури — без цього прокрутити вміст без миші неможливо. |
edgeThreshold | number | 1 | Допуск у пікселях, у межах якого край вважається досягнутим. Нуль не годиться: при дробовому масштабуванні сторінки scrollTop + clientHeight ніколи точно не дорівнює scrollHeight, і подія `reachEnd` не спрацьовувала б узагалі. |
height | string | — | Фіксована висота області — будь-яка CSS-величина. |
maxHeight | string | — | Стеля висоти: область росте за вмістом, доки не впреться. |
Події
| Назва | Payload | Опис |
|---|---|---|
scroll | [event: Event] | Нативна подія прокрутки. |
reachStart | [] | Прокрутка вперше досягла початку. |
reachEnd | [] | Прокрутка вперше досягла кінця. |
Слоти
| Назва | Опис |
|---|---|
default | Вміст області. Отримує стан країв, щоб споживач міг показати власну підказку «є що прокручувати» замість типового градієнта. |
Доступно через ref
| Назва | Тип | Опис |
|---|---|---|
viewportEl | HTMLElement | — |
atStart | boolean | — |
atEnd | boolean | — |
scrollTo | (options: ScrollToOptions) => void | — |
scrollToStart | (behavior?: ScrollBehavior) => void | — |
scrollToEnd | (behavior?: ScrollBehavior) => void | — |
Коли використовувати
Коли частині інтерфейсу потрібна власна вертикальна чи горизонтальна прокрутка — sidebar, журнал подій, довга панель або таблиця. Компонент додає лише affordance й події, не замінюючи механізм браузера.
Коли НЕ використовувати
Не огортайте ним всю сторінку й не створюйте вкладені scroll-контейнери без
необхідності. Для тисяч однотипних рядків використовуйте UiVirtualList.
Доступність
Viewport лишається нативним overflow-контейнером, фокусується клавіатурою і
має іменовану region. PageUp, PageDown, Home, End, wheel і touch працюють
без кастомного перехоплення.