[{"data":1,"prerenderedAt":206},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fscroll-area":3,"component-meta:UiScrollArea":82},{"id":4,"title":5,"body":6,"component":66,"dependsOn":67,"description":68,"emitDescriptions":69,"extension":73,"meta":74,"navigation":75,"order":76,"path":77,"seo":78,"status":79,"stem":80,"__hash__":81},"docs\u002Fdocs\u002Fcomponents\u002Fscroll-area.md","ScrollArea",{"type":7,"value":8,"toc":57},"minimark",[9,14,19,23,26,30,34,38,46,50],[10,11,13],"h2",{"id":12},"приклад","Приклад",[15,16],"component-preview",{"name":17,"stage":18},"scroll-area-basic","min-h-80",[10,20,22],{"id":21},"api","API",[24,25],"component-api",{},[10,27,29],{"id":28},"коли-використовувати","Коли використовувати",[31,32,33],"p",{},"Коли частині інтерфейсу потрібна власна вертикальна чи горизонтальна\nпрокрутка — sidebar, журнал подій, довга панель або таблиця. Компонент додає\nлише affordance й події, не замінюючи механізм браузера.",[10,35,37],{"id":36},"коли-не-використовувати","Коли НЕ використовувати",[31,39,40,41,45],{},"Не огортайте ним всю сторінку й не створюйте вкладені scroll-контейнери без\nнеобхідності. Для тисяч однотипних рядків використовуйте ",[42,43,44],"code",{},"UiVirtualList",".",[10,47,49],{"id":48},"доступність","Доступність",[31,51,52,53,56],{},"Viewport лишається нативним overflow-контейнером, фокусується клавіатурою і\nмає іменовану ",[42,54,55],{},"region",". PageUp, PageDown, Home, End, wheel і touch працюють\nбез кастомного перехоплення.",{"title":58,"searchDepth":59,"depth":59,"links":60},"",2,[61,62,63,64,65],{"id":12,"depth":59,"text":13},{"id":21,"depth":59,"text":22},{"id":28,"depth":59,"text":29},{"id":36,"depth":59,"text":37},{"id":48,"depth":59,"text":49},"UiScrollArea",[],"Нативна scroll-область із edge affordance, подіями меж і програмним API.",{"scroll":70,"reachStart":71,"reachEnd":72},"Нативна подія прокрутки.","Прокрутка вперше досягла початку.","Прокрутка вперше досягла кінця.","md",{},true,49,"\u002Fdocs\u002Fcomponents\u002Fscroll-area",{"title":5,"description":68},"stable","docs\u002Fcomponents\u002Fscroll-area","MxraPdrbAFs6IIA5Pg_pLSYY0-lt5feXvxd1PJK-8fc",{"mode":83,"prefetch":84,"preload":84,"filePath":85,"declarationPath":86,"pascalName":66,"kebabName":87,"chunkName":88,"priority":89,"_scanned":75,"meta":90},"all",false,"app\u002Fcomponents\u002Fui\u002FUiScrollArea.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiScrollArea.vue","ui-scroll-area","components\u002Fui-scroll-area",1,{"type":89,"props":91,"slots":128,"events":148,"exposed":172,"hash":205},[92,98,109,115,120,124],{"name":93,"global":84,"default":94,"description":95,"tags":96,"required":84,"type":97,"schema":97},"ariaLabel","\"Прокручувана область\"","Доступне ім'я області. Її оголошено як `region`, тож ім'я обов'язкове.",[],"string",{"name":99,"global":84,"default":100,"description":101,"tags":102,"required":84,"type":103,"schema":104},"orientation","\"vertical\"","Вісь прокрутки. `both` вмикає обидві одразу.",[],"\"vertical\" | \"horizontal\" | \"both\"",{"kind":105,"type":103,"schema":106},"enum",{"0":100,"1":107,"2":108},"\"horizontal\"","\"both\"",{"name":110,"global":84,"default":111,"description":112,"tags":113,"required":84,"type":114,"schema":114},"tabindex","0","tabindex області. Нуль лишає її доступною з клавіатури — без цього\r\nпрокрутити вміст без миші неможливо.",[],"number",{"name":116,"global":84,"default":117,"description":118,"tags":119,"required":84,"type":114,"schema":114},"edgeThreshold","1","Допуск у пікселях, у межах якого край вважається досягнутим.\r\n\r\nНуль не годиться: при дробовому масштабуванні сторінки\r\nscrollTop + clientHeight ніколи точно не дорівнює scrollHeight, і\r\nподія `reachEnd` не спрацьовувала б узагалі.",[],{"name":121,"global":84,"description":122,"tags":123,"required":84,"type":97,"schema":97},"height","Фіксована висота області — будь-яка CSS-величина.",[],{"name":125,"global":84,"description":126,"tags":127,"required":84,"type":97,"schema":97},"maxHeight","Стеля висоти: область росте за вмістом, доки не впреться.",[],[129],{"name":130,"type":131,"description":132,"tags":133,"schema":134},"default","{ atStart: boolean; atEnd: boolean; }","Вміст області. Отримує стан країв, щоб споживач міг показати власну\r\nпідказку «є що прокручувати» замість типового градієнта.",[],{"kind":135,"type":131,"schema":136},"object",{"atStart":137,"atEnd":145},{"name":138,"global":84,"description":58,"tags":139,"required":75,"type":140,"schema":141},"atStart",[],"boolean",{"kind":105,"type":140,"schema":142},{"0":143,"1":144},"false","true",{"name":146,"global":84,"description":58,"tags":147,"required":75,"type":140,"schema":140},"atEnd",[],[149,161,167],{"name":150,"description":58,"tags":151,"type":152,"signature":153,"schema":154},"scroll",[],"[event: Event]","(event: \"scroll\", event: Event): void",[155],{"kind":135,"type":156,"schema":157},"Event",{"name":158,"global":84,"description":159,"tags":160,"required":75,"type":97,"schema":97},"type","The **`type`** read-only property of the Event interface returns a string containing the event's type.\n\n[MDN Reference](https:\u002F\u002Fdeveloper.mozilla.org\u002Fdocs\u002FWeb\u002FAPI\u002FEvent\u002Ftype)",[],{"name":162,"description":58,"tags":163,"type":164,"signature":165,"schema":166},"reachStart",[],"[]","(event: \"reachStart\"): void",[],{"name":168,"description":58,"tags":169,"type":164,"signature":170,"schema":171},"reachEnd",[],"(event: \"reachEnd\"): void",[],[173,177,181,185,193,200],{"name":174,"type":175,"description":58,"tags":176,"schema":175},"viewportEl","HTMLElement",[],{"name":138,"type":140,"description":58,"tags":178,"schema":179},[],{"kind":105,"type":140,"schema":180},{"0":143,"1":144},{"name":146,"type":140,"description":58,"tags":182,"schema":183},[],{"kind":105,"type":140,"schema":184},{"0":143,"1":144},{"name":186,"type":187,"description":58,"tags":188,"schema":189},"scrollTo","(options: ScrollToOptions) => void",[],{"kind":190,"type":191,"schema":192},"event","(options: ScrollToOptions): void",{},{"name":194,"type":195,"description":58,"tags":196,"schema":197},"scrollToStart","(behavior?: ScrollBehavior) => void",[],{"kind":190,"type":198,"schema":199},"(behavior?: ScrollBehavior): void",{},{"name":201,"type":195,"description":58,"tags":202,"schema":203},"scrollToEnd",[],{"kind":190,"type":198,"schema":204},{},"mwfseIBpRvqiGbjjRmlBDlukPW4T5AKtfIcGumo96IQ",1788072639726]