[{"data":1,"prerenderedAt":4883},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Fscroll-view":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Fscroll-view":2617},{"id":4,"title":5,"body":6,"description":2606,"extension":2607,"meta":2608,"nav":2609,"navigation":707,"path":2610,"seo":2611,"stem":2615,"__hash__":2616},"content_en\u002Fen\u002Fcomponents\u002Fscroll-view.md","Scroll View",{"type":7,"value":8,"toc":2584},"minimark",[9,13,22,27,34,50,113,117,124,174,178,184,233,237,244,317,321,336,353,357,367,422,426,444,512,516,527,769,773,791,913,917,962,982,987,1069,1080,1083,1094,1181,1203,1370,1557,1591,1595,1599,2016,2019,2163,2167,2177,2332,2354,2358,2527,2531,2554,2580],[10,11,5],"h1",{"id":12},"scroll-view",[14,15,16,17,21],"p",{},"A container control aligned with the WinUI 3 ",[18,19,20],"code",{},"ScrollView",": when content exceeds the viewport it scrolls, pans, and zooms, with scrollbars styled like WinUI 3's\noverlay style (a 2px thin thumb that appears once the pointer enters the container; when the pointer moves onto the scrollbar the thumb thickens to 6px, the pill-shaped track expands along with the step buttons at both ends, then collapses when the pointer leaves, and the whole thing fades out after 2s without interaction).",[23,24,26],"h2",{"id":25},"basic-usage-vertical","Basic usage (vertical)",[14,28,29,30,33],{},"By default ",[18,31,32],{},"content-orientation=\"vertical\"","; the wheel \u002F touch panning \u002F dragging the scrollbar can all scroll.",[14,35,36,37,41,42,45,46,49],{},"Touch panning is owned exclusively by ",[38,39,40],"strong",{},"native Touch Events"," (non-passive listeners that call\n",[18,43,44],{},"preventDefault"," on ",[18,47,48],{},"touchmove","), handled separately from pen; therefore native scroll containers inside\nthe content (e.g. code blocks) cannot be scrolled by touch — an existing limitation of the touch model.",[51,52,53,60],"demo-block",{"title":26},[54,55,57],"template",{"v-slot:preview":56},"",[58,59],"scroll-view-vertical-demo",{},[54,61,62],{"v-slot:code":56},[63,64,68],"pre",{"className":65,"code":66,"language":67,"meta":56,"style":56},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereScrollView class=\"h-80\">\n  \u003Cdiv v-for=\"row in rows\" :key=\"row\">Row {{ row }} — native Windows 11 scrolling experience\u003C\u002Fdiv>\n\u003C\u002FFluereScrollView>\n","vue",[18,69,70,97,103],{"__ignoreMap":56},[71,72,75,79,83,87,90,94],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"sVt8B","\u003C",[71,80,82],{"class":81},"s9eBZ","FluereScrollView",[71,84,86],{"class":85},"sScJk"," class",[71,88,89],{"class":77},"=",[71,91,93],{"class":92},"sZZnC","\"h-80\"",[71,95,96],{"class":77},">\n",[71,98,100],{"class":73,"line":99},2,[71,101,102],{"class":77},"  \u003Cdiv v-for=\"row in rows\" :key=\"row\">Row {{ row }} — native Windows 11 scrolling experience\u003C\u002Fdiv>\n",[71,104,106,109,111],{"class":73,"line":105},3,[71,107,108],{"class":77},"\u003C\u002F",[71,110,82],{"class":81},[71,112,96],{"class":77},[23,114,116],{"id":115},"horizontal-scrolling","Horizontal scrolling",[14,118,119,120,123],{},"With ",[18,121,122],{},"content-orientation=\"horizontal\"",", the content's height is constrained to the viewport while its width grows freely. Scroll horizontally with Shift + wheel or touch.",[51,125,126,131],{"title":116},[54,127,128],{"v-slot:preview":56},[129,130],"scroll-view-horizontal-demo",{},[54,132,133],{"v-slot:code":56},[63,134,136],{"className":65,"code":135,"language":67,"meta":56,"style":56},"\u003CFluereScrollView class=\"h-40\" content-orientation=\"horizontal\">\n  \u003Cdiv class=\"flex gap-fluent-m\">…card list…\u003C\u002Fdiv>\n\u003C\u002FFluereScrollView>\n",[18,137,138,161,166],{"__ignoreMap":56},[71,139,140,142,144,146,148,151,154,156,159],{"class":73,"line":74},[71,141,78],{"class":77},[71,143,82],{"class":81},[71,145,86],{"class":85},[71,147,89],{"class":77},[71,149,150],{"class":92},"\"h-40\"",[71,152,153],{"class":85}," content-orientation",[71,155,89],{"class":77},[71,157,158],{"class":92},"\"horizontal\"",[71,160,96],{"class":77},[71,162,163],{"class":73,"line":99},[71,164,165],{"class":77},"  \u003Cdiv class=\"flex gap-fluent-m\">…card list…\u003C\u002Fdiv>\n",[71,167,168,170,172],{"class":73,"line":105},[71,169,108],{"class":77},[71,171,82],{"class":81},[71,173,96],{"class":77},[23,175,177],{"id":176},"bidirectional-scrolling","Bidirectional scrolling",[14,179,119,180,183],{},[18,181,182],{},"content-orientation=\"both\"",", the content is unconstrained in both horizontal and vertical directions.",[51,185,186,191],{"title":177},[54,187,188],{"v-slot:preview":56},[189,190],"scroll-view-both-demo",{},[54,192,193],{"v-slot:code":56},[63,194,196],{"className":65,"code":195,"language":67,"meta":56,"style":56},"\u003CFluereScrollView class=\"h-72\" content-orientation=\"both\">\n  \u003Cdiv class=\"grid grid-cols-6 gap-fluent-m\">…cells…\u003C\u002Fdiv>\n\u003C\u002FFluereScrollView>\n",[18,197,198,220,225],{"__ignoreMap":56},[71,199,200,202,204,206,208,211,213,215,218],{"class":73,"line":74},[71,201,78],{"class":77},[71,203,82],{"class":81},[71,205,86],{"class":85},[71,207,89],{"class":77},[71,209,210],{"class":92},"\"h-72\"",[71,212,153],{"class":85},[71,214,89],{"class":77},[71,216,217],{"class":92},"\"both\"",[71,219,96],{"class":77},[71,221,222],{"class":73,"line":99},[71,223,224],{"class":77},"  \u003Cdiv class=\"grid grid-cols-6 gap-fluent-m\">…cells…\u003C\u002Fdiv>\n",[71,226,227,229,231],{"class":73,"line":105},[71,228,108],{"class":77},[71,230,82],{"class":81},[71,232,96],{"class":77},[23,234,236],{"id":235},"nested-scrolling","Nested scrolling",[14,238,239,240,243],{},"An inner ScrollView sits within the outer content. ",[38,241,242],{},"Mouse-wheel ownership"," aligns with WinUI 3: when the pointer stays over the inner scroll view, the inner one exclusively owns the wheel,\nso even if the inner one has already scrolled to its limit the outer one will not scroll along; only when the pointer is moved to outer content outside the inner one does the wheel go to the outer view (touch is owned exclusively by native touch events, pen is exclusively captured by the pointer).",[51,245,246,251],{"title":236},[54,247,248],{"v-slot:preview":56},[249,250],"scroll-view-nested-demo",{},[54,252,253],{"v-slot:code":56},[63,254,256],{"className":65,"code":255,"language":67,"meta":56,"style":56},"\u003CFluereScrollView class=\"h-96\">\n  \u003C!-- Outer content -->\n  \u003CFluereScrollView class=\"h-40\">…inner A owns the wheel…\u003C\u002FFluereScrollView>\n  \u003CFluereScrollView class=\"h-40\">…inner B owns the wheel…\u003C\u002FFluereScrollView>\n\u003C\u002FFluereScrollView>\n",[18,257,258,273,278,287,308],{"__ignoreMap":56},[71,259,260,262,264,266,268,271],{"class":73,"line":74},[71,261,78],{"class":77},[71,263,82],{"class":81},[71,265,86],{"class":85},[71,267,89],{"class":77},[71,269,270],{"class":92},"\"h-96\"",[71,272,96],{"class":77},[71,274,275],{"class":73,"line":99},[71,276,277],{"class":77},"  \u003C!-- Outer content -->\n",[71,279,280,283,285],{"class":73,"line":105},[71,281,282],{"class":77},"  \u003CFluereScrollView class=\"h-40\">…inner A owns the wheel…\u003C\u002F",[71,284,82],{"class":81},[71,286,96],{"class":77},[71,288,290,293,295,297,299,301,304,306],{"class":73,"line":289},4,[71,291,292],{"class":77},"  \u003C",[71,294,82],{"class":81},[71,296,86],{"class":85},[71,298,89],{"class":77},[71,300,150],{"class":92},[71,302,303],{"class":77},">…inner B owns the wheel…\u003C\u002F",[71,305,82],{"class":81},[71,307,96],{"class":77},[71,309,311,313,315],{"class":73,"line":310},5,[71,312,108],{"class":77},[71,314,82],{"class":81},[71,316,96],{"class":77},[23,318,320],{"id":319},"focus-scrolling","Focus scrolling",[14,322,323,324,327,328,331,332,335],{},"When focus (Tab or programmatic ",[18,325,326],{},"focus()",") enters an element inside the content, the element is automatically scrolled into view — aligned with WinUI\n",[18,329,330],{},"BringIntoViewOnFocusChange"," (enabled by default), so keyboard users never leave focus outside the viewport; no animation occurs if the element is already in view.\nThat scroll also fires the ",[18,333,334],{},"bring-into-view"," event, and the target offset can be cancelled or rewritten in the callback.",[14,337,338,339,342,343,342,346,342,349,352],{},"When the container gains focus (or focus is inside the content), the arrow keys, PageUp \u002F PageDown, Home \u002F End scroll the view; when an\n",[18,340,341],{},"input"," \u002F ",[18,344,345],{},"textarea",[18,347,348],{},"select",[18,350,351],{},"contenteditable"," is hit, the keys are handed back to the input control.",[23,354,356],{"id":355},"zoom","Zoom",[14,358,119,359,362,363,366],{},[18,360,361],{},"zoom-mode=\"enabled\"",": Ctrl \u002F Cmd + wheel or pinch-to-zoom, with the pointer position as the zoom center. Aligned with the WinUI\n",[18,364,365],{},"min-zoom-factor \u002F max-zoom-factor"," constraints.",[51,368,369,374],{"title":356},[54,370,371],{"v-slot:preview":56},[372,373],"scroll-view-zoom-demo",{},[54,375,376],{"v-slot:code":56},[63,377,379],{"className":65,"code":378,"language":67,"meta":56,"style":56},"\u003CFluereScrollView class=\"h-80\" content-orientation=\"both\" zoom-mode=\"enabled\">\n  \u003C!-- Ctrl \u002F Cmd + wheel, or pinch to zoom -->\n\u003C\u002FFluereScrollView>\n",[18,380,381,409,414],{"__ignoreMap":56},[71,382,383,385,387,389,391,393,395,397,399,402,404,407],{"class":73,"line":74},[71,384,78],{"class":77},[71,386,82],{"class":81},[71,388,86],{"class":85},[71,390,89],{"class":77},[71,392,93],{"class":92},[71,394,153],{"class":85},[71,396,89],{"class":77},[71,398,217],{"class":92},[71,400,401],{"class":85}," zoom-mode",[71,403,89],{"class":77},[71,405,406],{"class":92},"\"enabled\"",[71,408,96],{"class":77},[71,410,411],{"class":73,"line":99},[71,412,413],{"class":77},"  \u003C!-- Ctrl \u002F Cmd + wheel, or pinch to zoom -->\n",[71,415,416,418,420],{"class":73,"line":105},[71,417,108],{"class":77},[71,419,82],{"class":81},[71,421,96],{"class":77},[23,423,425],{"id":424},"scrollbar-visibility","Scrollbar visibility",[14,427,428,431,432,435,436,439,440,443],{},[18,429,430],{},"vertical-scroll-bar-visibility"," supports ",[18,433,434],{},"auto"," (default, overlay) \u002F ",[18,437,438],{},"visible"," (always shown) \u002F ",[18,441,442],{},"hidden"," (still scrollable).",[51,445,446,451],{"title":425},[54,447,448],{"v-slot:preview":56},[449,450],"scroll-view-bar-visibility-demo",{},[54,452,453],{"v-slot:code":56},[63,454,456],{"className":65,"code":455,"language":67,"meta":56,"style":56},"\u003CFluereScrollView>…auto (default, overlay)…\u003C\u002FFluereScrollView>\n\u003CFluereScrollView vertical-scroll-bar-visibility=\"visible\">…always shown…\u003C\u002FFluereScrollView>\n\u003CFluereScrollView vertical-scroll-bar-visibility=\"hidden\">…hidden but scrollable…\u003C\u002FFluereScrollView>\n",[18,457,458,471,492],{"__ignoreMap":56},[71,459,460,462,464,467,469],{"class":73,"line":74},[71,461,78],{"class":77},[71,463,82],{"class":81},[71,465,466],{"class":77},">…auto (default, overlay)…\u003C\u002F",[71,468,82],{"class":81},[71,470,96],{"class":77},[71,472,473,475,477,480,482,485,488,490],{"class":73,"line":99},[71,474,78],{"class":77},[71,476,82],{"class":81},[71,478,479],{"class":85}," vertical-scroll-bar-visibility",[71,481,89],{"class":77},[71,483,484],{"class":92},"\"visible\"",[71,486,487],{"class":77},">…always shown…\u003C\u002F",[71,489,82],{"class":81},[71,491,96],{"class":77},[71,493,494,496,498,500,502,505,508,510],{"class":73,"line":105},[71,495,78],{"class":77},[71,497,82],{"class":81},[71,499,479],{"class":85},[71,501,89],{"class":77},[71,503,504],{"class":92},"\"hidden\"",[71,506,507],{"class":77},">…hidden but scrollable…\u003C\u002F",[71,509,82],{"class":81},[71,511,96],{"class":77},[23,513,515],{"id":514},"programmatic-api","Programmatic API",[14,517,518,519,522,523,526],{},"Aligned with the WinUI methods: ",[18,520,521],{},"scrollTo \u002F scrollBy \u002F zoomTo \u002F zoomBy \u002F addScrollVelocity \u002F addZoomVelocity \u002F bringIntoView"," (supporting animation and correlation IDs),\nplus the read-only properties ",[18,524,525],{},"horizontalOffset \u002F verticalOffset \u002F zoomFactor \u002F extentWidth \u002F extentHeight \u002F viewportWidth \u002F viewportHeight \u002F scrollableWidth \u002F scrollableHeight \u002F state \u002F currentAnchor",". Full signatures are in the 「Methods」 and 「Readonly properties」 tables below.",[51,528,529,534],{"title":515},[54,530,531],{"v-slot:preview":56},[532,533],"scroll-view-api-demo",{},[54,535,536],{"v-slot:code":56},[63,537,539],{"className":65,"code":538,"language":67,"meta":56,"style":56},"\u003Ctemplate>\n  \u003CFluereScrollView\n    ref=\"sv\"\n    content-orientation=\"both\"\n    zoom-mode=\"enabled\"\n    @view-changed=\"refreshReadout\"\n  >\n    …content…\n  \u003C\u002FFluereScrollView>\n  \u003Cbutton @click=\"sv?.scrollBy(0, 120)\">Scroll down 120px\u003C\u002Fbutton>\n  \u003Cbutton @click=\"sv?.scrollTo(0, 0)\">Back to top\u003C\u002Fbutton>\n  \u003Cbutton @click=\"sv?.zoomBy(0.25)\">Zoom in\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst sv = ref\u003CInstanceType\u003Ctypeof FluereScrollView>>()\n\u003C\u002Fscript>\n",[18,540,541,549,556,566,576,586,606,612,618,628,651,672,693,702,709,730,760],{"__ignoreMap":56},[71,542,543,545,547],{"class":73,"line":74},[71,544,78],{"class":77},[71,546,54],{"class":81},[71,548,96],{"class":77},[71,550,551,553],{"class":73,"line":99},[71,552,292],{"class":77},[71,554,555],{"class":81},"FluereScrollView\n",[71,557,558,561,563],{"class":73,"line":105},[71,559,560],{"class":85},"    ref",[71,562,89],{"class":77},[71,564,565],{"class":92},"\"sv\"\n",[71,567,568,571,573],{"class":73,"line":289},[71,569,570],{"class":85},"    content-orientation",[71,572,89],{"class":77},[71,574,575],{"class":92},"\"both\"\n",[71,577,578,581,583],{"class":73,"line":310},[71,579,580],{"class":85},"    zoom-mode",[71,582,89],{"class":77},[71,584,585],{"class":92},"\"enabled\"\n",[71,587,589,592,595,597,600,603],{"class":73,"line":588},6,[71,590,591],{"class":77},"    @",[71,593,594],{"class":85},"view-changed",[71,596,89],{"class":77},[71,598,599],{"class":92},"\"",[71,601,602],{"class":77},"refreshReadout",[71,604,605],{"class":92},"\"\n",[71,607,609],{"class":73,"line":608},7,[71,610,611],{"class":77},"  >\n",[71,613,615],{"class":73,"line":614},8,[71,616,617],{"class":77},"    …content…\n",[71,619,621,624,626],{"class":73,"line":620},9,[71,622,623],{"class":77},"  \u003C\u002F",[71,625,82],{"class":81},[71,627,96],{"class":77},[71,629,631,633,636,639,641,644,647,649],{"class":73,"line":630},10,[71,632,292],{"class":77},[71,634,635],{"class":81},"button",[71,637,638],{"class":85}," @click",[71,640,89],{"class":77},[71,642,643],{"class":92},"\"sv?.scrollBy(0, 120)\"",[71,645,646],{"class":77},">Scroll down 120px\u003C\u002F",[71,648,635],{"class":81},[71,650,96],{"class":77},[71,652,654,656,658,660,662,665,668,670],{"class":73,"line":653},11,[71,655,292],{"class":77},[71,657,635],{"class":81},[71,659,638],{"class":85},[71,661,89],{"class":77},[71,663,664],{"class":92},"\"sv?.scrollTo(0, 0)\"",[71,666,667],{"class":77},">Back to top\u003C\u002F",[71,669,635],{"class":81},[71,671,96],{"class":77},[71,673,675,677,679,681,683,686,689,691],{"class":73,"line":674},12,[71,676,292],{"class":77},[71,678,635],{"class":81},[71,680,638],{"class":85},[71,682,89],{"class":77},[71,684,685],{"class":92},"\"sv?.zoomBy(0.25)\"",[71,687,688],{"class":77},">Zoom in\u003C\u002F",[71,690,635],{"class":81},[71,692,96],{"class":77},[71,694,696,698,700],{"class":73,"line":695},13,[71,697,108],{"class":77},[71,699,54],{"class":81},[71,701,96],{"class":77},[71,703,705],{"class":73,"line":704},14,[71,706,708],{"emptyLinePlaceholder":707},true,"\n",[71,710,712,714,717,720,723,725,728],{"class":73,"line":711},15,[71,713,78],{"class":77},[71,715,716],{"class":81},"script",[71,718,719],{"class":85}," setup",[71,721,722],{"class":85}," lang",[71,724,89],{"class":77},[71,726,727],{"class":92},"\"ts\"",[71,729,96],{"class":77},[71,731,733,737,741,744,747,749,752,754,757],{"class":73,"line":732},16,[71,734,736],{"class":735},"szBVR","const",[71,738,740],{"class":739},"sj4cs"," sv",[71,742,743],{"class":735}," =",[71,745,746],{"class":85}," ref",[71,748,78],{"class":77},[71,750,751],{"class":85},"InstanceType",[71,753,78],{"class":77},[71,755,756],{"class":735},"typeof",[71,758,759],{"class":77}," FluereScrollView>>()\n",[71,761,763,765,767],{"class":73,"line":762},17,[71,764,108],{"class":77},[71,766,716],{"class":81},[71,768,96],{"class":77},[23,770,772],{"id":771},"events","Events",[14,774,775,778,779,782,783,786,787,790],{},[18,776,777],{},"view-changed \u002F extent-changed \u002F state-changed \u002F scroll-animation-starting \u002F scroll-completed \u002F zoom-animation-starting \u002F zoom-completed \u002F anchor-requested \u002F bring-into-view",",\nwith payloads in the 「Events」 table below. These are component events (",[18,780,781],{},"@event","); the ",[38,784,785],{},"DOM command events"," meant for page automation are in 「Agent \u002F Automation access」,\ntheir names carry the ",[18,788,789],{},"fluere:"," prefix and they are dispatched on the root element.",[51,792,793,798],{"title":772},[54,794,795],{"v-slot:preview":56},[796,797],"scroll-view-events-demo",{},[54,799,800],{"v-slot:code":56},[63,801,803],{"className":65,"code":802,"language":67,"meta":56,"style":56},"\u003CFluereScrollView\n  @view-changed=\"logEvent('view-changed')\"\n  @state-changed=\"logEvent(`state → ${$event}`)\"\n  @scroll-completed=\"logEvent(`scroll-completed #${$event.correlationId}`)\"\n>\n  …content…\n\u003C\u002FFluereScrollView>\n",[18,804,805,811,836,864,896,900,905],{"__ignoreMap":56},[71,806,807,809],{"class":73,"line":74},[71,808,78],{"class":77},[71,810,555],{"class":81},[71,812,813,816,818,820,822,825,828,831,834],{"class":73,"line":99},[71,814,815],{"class":77},"  @",[71,817,594],{"class":85},[71,819,89],{"class":77},[71,821,599],{"class":92},[71,823,824],{"class":85},"logEvent",[71,826,827],{"class":77},"(",[71,829,830],{"class":92},"'view-changed'",[71,832,833],{"class":77},")",[71,835,605],{"class":92},[71,837,838,840,843,845,847,849,851,854,857,860,862],{"class":73,"line":105},[71,839,815],{"class":77},[71,841,842],{"class":85},"state-changed",[71,844,89],{"class":77},[71,846,599],{"class":92},[71,848,824],{"class":85},[71,850,827],{"class":77},[71,852,853],{"class":92},"`state → ${",[71,855,856],{"class":77},"$event",[71,858,859],{"class":92},"}`",[71,861,833],{"class":77},[71,863,605],{"class":92},[71,865,866,868,871,873,875,877,879,882,884,887,890,892,894],{"class":73,"line":289},[71,867,815],{"class":77},[71,869,870],{"class":85},"scroll-completed",[71,872,89],{"class":77},[71,874,599],{"class":92},[71,876,824],{"class":85},[71,878,827],{"class":77},[71,880,881],{"class":92},"`scroll-completed #${",[71,883,856],{"class":77},[71,885,886],{"class":92},".",[71,888,889],{"class":77},"correlationId",[71,891,859],{"class":92},[71,893,833],{"class":77},[71,895,605],{"class":92},[71,897,898],{"class":73,"line":310},[71,899,96],{"class":77},[71,901,902],{"class":73,"line":588},[71,903,904],{"class":77},"  …content…\n",[71,906,907,909,911],{"class":73,"line":608},[71,908,108],{"class":77},[71,910,82],{"class":81},[71,912,96],{"class":77},[23,914,916],{"id":915},"agent-automation-access","Agent \u002F Automation access",[14,918,919,920,923,924,927,928,931,932,935,936,939,940,342,943,342,946,949,950,957,958,961],{},"This component expresses its offset through a content ",[18,921,922],{},"transform"," and its presenter is ",[18,925,926],{},"overflow: clip"," (",[38,929,930],{},"not a native scroll container","),\nso the native scrolling semantics of browsers and automation tools do not apply here: ",[18,933,934],{},"scrollTop"," is always ",[18,937,938],{},"0",",\nand ",[18,941,942],{},"scrollBy",[18,944,945],{},"scrollIntoView",[18,947,948],{},"scrollIntoViewIfNeeded"," can find no scrollable ancestor\n(native auto-scrolling before Playwright clicks an element outside the viewport also fails, which is\nthe pitfall documented in ",[951,952,956],"a",{"href":953,"rel":954},"https:\u002F\u002Fgithub.com\u002FAltermoe\u002Ffluere-vue\u002Fblob\u002Fmain\u002Fdocs\u002Fstyle-spec.md",[955],"nofollow","style-spec §7","). For this the component provides two DOM-based paths,\n",[38,959,960],{},"neither of which requires touching the component instance",":",[963,964,965,972],"ul",{},[966,967,968,971],"li",{},[38,969,970],{},"Read-only reflection",": the root element always carries a set of state attributes for determining 「whether it moved \u002F how much is left」;",[966,973,974,977,978,981],{},[38,975,976],{},"Command events",": dispatching ",[18,979,980],{},"fluere:*"," events on the root element drives the scrolling, and receipts are received once applied.",[983,984,986],"h3",{"id":985},"read-only-reflection-attributes","Read-only reflection attributes",[988,989,990,1003],"table",{},[991,992,993],"thead",{},[994,995,996,1000],"tr",{},[997,998,999],"th",{},"Attribute",[997,1001,1002],{},"Description",[1004,1005,1006,1017,1027,1037,1047,1057],"tbody",{},[994,1007,1008,1014],{},[1009,1010,1011],"td",{},[18,1012,1013],{},"data-scroll-x",[1009,1015,1016],{},"Current horizontal offset (pixels, rounded)",[994,1018,1019,1024],{},[1009,1020,1021],{},[18,1022,1023],{},"data-scroll-y",[1009,1025,1026],{},"Current vertical offset (pixels, rounded)",[994,1028,1029,1034],{},[1009,1030,1031],{},[18,1032,1033],{},"data-scroll-max-x",[1009,1035,1036],{},"Maximum scrollable width (content × zoom − viewport, rounded)",[994,1038,1039,1044],{},[1009,1040,1041],{},[18,1042,1043],{},"data-scroll-max-y",[1009,1045,1046],{},"Maximum scrollable height, rounded",[994,1048,1049,1054],{},[1009,1050,1051],{},[18,1052,1053],{},"data-zoom-factor",[1009,1055,1056],{},"Current zoom factor",[994,1058,1059,1064],{},[1009,1060,1061],{},[18,1062,1063],{},"data-scroll-state",[1009,1065,1066],{},[18,1067,1068],{},"'idle' | 'interaction' | 'inertia' | 'animation'",[14,1070,1071,1072,1075,1076,1079],{},"Once rounded, equality comparisons can safely determine 「whether it reached the end」 (",[18,1073,1074],{},"data-scroll-y === data-scroll-max-y",").\nThese attributes are rewritten frame by frame when the offset changes, ",[38,1077,1078],{},"do not match them in CSS"," (otherwise style recalculation is triggered on every frame during animation;\na contract test in the repo guards this rule).",[983,1081,976],{"id":1082},"command-events",[14,1084,1085,1086,1089,1090,1093],{},"Dispatch on the component root element (",[18,1087,1088],{},".fui-scrollview","), with ",[18,1091,1092],{},"bubbles: true",", so they can also be attached at the page level.",[988,1095,1096,1111],{},[991,1097,1098],{},[994,1099,1100,1103,1109],{},[997,1101,1102],{},"Event (DOM event)",[997,1104,1105,1106,833],{},"Payload (",[18,1107,1108],{},"event.detail",[997,1110,1002],{},[1004,1112,1113,1128,1144,1163],{},[994,1114,1115,1120,1125],{},[1009,1116,1117],{},[18,1118,1119],{},"fluere:scroll-to",[1009,1121,1122],{},[18,1123,1124],{},"{ x?, y?, animationMode? }",[1009,1126,1127],{},"Scroll to an absolute offset; omitted parts keep their current value",[994,1129,1130,1135,1139],{},[1009,1131,1132],{},[18,1133,1134],{},"fluere:scroll-by",[1009,1136,1137],{},[18,1138,1124],{},[1009,1140,1141,1142],{},"Scroll by a delta; omitted parts are treated as ",[18,1143,938],{},[994,1145,1146,1151,1156],{},[1009,1147,1148],{},[18,1149,1150],{},"fluere:bring-into-view",[1009,1152,1153],{},[18,1154,1155],{},"{ element?, selector?, margin? }",[1009,1157,1158,1159,1162],{},"Scroll an element inside the content into view (",[18,1160,1161],{},"element"," takes precedence)",[994,1164,1165,1170,1178],{},[1009,1166,1167],{},[18,1168,1169],{},"fluere:scroll-settled",[1009,1171,1172,927,1175,833],{},[18,1173,1174],{},"{ x, y, zoomFactor }",[38,1176,1177],{},"outbound",[1009,1179,1180],{},"Dispatched by the component after a command lands, for waiting on a stable frame",[14,1182,1183,1184,1186,1187,1190,1191,1194,1195,1198,1199,1202],{},"An invalid payload (a non-finite number, an unresolvable target) is a no-op and does not throw; ",[18,1185,334],{}," only accepts elements inside the content.\nPassing ",[18,1188,1189],{},"animationMode"," as ",[18,1192,1193],{},"'disabled'"," skips the animation, which suits deterministic positioning before a screenshot;\nsetting ",[18,1196,1197],{},"agentCommands"," to ",[18,1200,1201],{},"false"," disables the command events (read-only reflection is kept).",[63,1204,1208],{"className":1205,"code":1206,"language":1207,"meta":56,"style":56},"language-js shiki shiki-themes github-light github-dark","const el = document.querySelector('.fui-scrollview')\n\n\u002F\u002F 1. Read state first: how much more needs to scroll?\nconst remaining = Number(el.dataset.scrollMaxY) - Number(el.dataset.scrollY)\n\n\u002F\u002F 2. Dispatch the command (bubbles lets page-level listeners receive it too)\nel.dispatchEvent(\n  new CustomEvent('fluere:scroll-by', { detail: { y: remaining, animationMode: 'disabled' } }),\n)\n\n\u002F\u002F 3. Wait for the receipt before screenshotting \u002F asserting\nawait new Promise((resolve) =>\n  el.addEventListener('fluere:scroll-settled', resolve, { once: true }),\n)\n","js",[18,1209,1210,1233,1237,1243,1266,1270,1275,1286,1307,1311,1315,1320,1344,1366],{"__ignoreMap":56},[71,1211,1212,1214,1217,1219,1222,1225,1227,1230],{"class":73,"line":74},[71,1213,736],{"class":735},[71,1215,1216],{"class":739}," el",[71,1218,743],{"class":735},[71,1220,1221],{"class":77}," document.",[71,1223,1224],{"class":85},"querySelector",[71,1226,827],{"class":77},[71,1228,1229],{"class":92},"'.fui-scrollview'",[71,1231,1232],{"class":77},")\n",[71,1234,1235],{"class":73,"line":99},[71,1236,708],{"emptyLinePlaceholder":707},[71,1238,1239],{"class":73,"line":105},[71,1240,1242],{"class":1241},"sJ8bj","\u002F\u002F 1. Read state first: how much more needs to scroll?\n",[71,1244,1245,1247,1250,1252,1255,1258,1261,1263],{"class":73,"line":289},[71,1246,736],{"class":735},[71,1248,1249],{"class":739}," remaining",[71,1251,743],{"class":735},[71,1253,1254],{"class":85}," Number",[71,1256,1257],{"class":77},"(el.dataset.scrollMaxY) ",[71,1259,1260],{"class":735},"-",[71,1262,1254],{"class":85},[71,1264,1265],{"class":77},"(el.dataset.scrollY)\n",[71,1267,1268],{"class":73,"line":310},[71,1269,708],{"emptyLinePlaceholder":707},[71,1271,1272],{"class":73,"line":588},[71,1273,1274],{"class":1241},"\u002F\u002F 2. Dispatch the command (bubbles lets page-level listeners receive it too)\n",[71,1276,1277,1280,1283],{"class":73,"line":608},[71,1278,1279],{"class":77},"el.",[71,1281,1282],{"class":85},"dispatchEvent",[71,1284,1285],{"class":77},"(\n",[71,1287,1288,1291,1294,1296,1299,1302,1304],{"class":73,"line":614},[71,1289,1290],{"class":735},"  new",[71,1292,1293],{"class":85}," CustomEvent",[71,1295,827],{"class":77},[71,1297,1298],{"class":92},"'fluere:scroll-by'",[71,1300,1301],{"class":77},", { detail: { y: remaining, animationMode: ",[71,1303,1193],{"class":92},[71,1305,1306],{"class":77}," } }),\n",[71,1308,1309],{"class":73,"line":620},[71,1310,1232],{"class":77},[71,1312,1313],{"class":73,"line":630},[71,1314,708],{"emptyLinePlaceholder":707},[71,1316,1317],{"class":73,"line":653},[71,1318,1319],{"class":1241},"\u002F\u002F 3. Wait for the receipt before screenshotting \u002F asserting\n",[71,1321,1322,1325,1328,1331,1334,1338,1341],{"class":73,"line":674},[71,1323,1324],{"class":735},"await",[71,1326,1327],{"class":735}," new",[71,1329,1330],{"class":739}," Promise",[71,1332,1333],{"class":77},"((",[71,1335,1337],{"class":1336},"s4XuR","resolve",[71,1339,1340],{"class":77},") ",[71,1342,1343],{"class":735},"=>\n",[71,1345,1346,1349,1352,1354,1357,1360,1363],{"class":73,"line":695},[71,1347,1348],{"class":77},"  el.",[71,1350,1351],{"class":85},"addEventListener",[71,1353,827],{"class":77},[71,1355,1356],{"class":92},"'fluere:scroll-settled'",[71,1358,1359],{"class":77},", resolve, { once: ",[71,1361,1362],{"class":739},"true",[71,1364,1365],{"class":77}," }),\n",[71,1367,1368],{"class":73,"line":704},[71,1369,1232],{"class":77},[51,1371,1373,1378],{"title":1372},"Agent interaction surface",[54,1374,1375],{"v-slot:preview":56},[1376,1377],"scroll-view-agent-demo",{},[54,1379,1380,1434],{"v-slot:code":56},[63,1381,1383],{"className":65,"code":1382,"language":67,"meta":56,"style":56},"\u003CFluereScrollView ref=\"sv\" label=\"Log list\" @view-changed=\"refresh\">\n  …content…\n\u003C\u002FFluereScrollView>\n",[18,1384,1385,1422,1426],{"__ignoreMap":56},[71,1386,1387,1389,1391,1393,1395,1398,1401,1403,1406,1409,1411,1413,1415,1418,1420],{"class":73,"line":74},[71,1388,78],{"class":77},[71,1390,82],{"class":81},[71,1392,746],{"class":85},[71,1394,89],{"class":77},[71,1396,1397],{"class":92},"\"sv\"",[71,1399,1400],{"class":85}," label",[71,1402,89],{"class":77},[71,1404,1405],{"class":92},"\"Log list\"",[71,1407,1408],{"class":77}," @",[71,1410,594],{"class":85},[71,1412,89],{"class":77},[71,1414,599],{"class":92},[71,1416,1417],{"class":77},"refresh",[71,1419,599],{"class":92},[71,1421,96],{"class":77},[71,1423,1424],{"class":73,"line":99},[71,1425,904],{"class":77},[71,1427,1428,1430,1432],{"class":73,"line":105},[71,1429,108],{"class":77},[71,1431,82],{"class":81},[71,1433,96],{"class":77},[63,1435,1439],{"className":1436,"code":1437,"language":1438,"meta":56,"style":56},"language-ts shiki shiki-themes github-light github-dark","\u002F\u002F Read-only reflection: read the DOM, never touch the instance\nconst root = sv.value.$el\nconst { scrollY, scrollMaxY } = root.dataset\n\n\u002F\u002F Command + receipt\nroot.addEventListener('fluere:scroll-settled', refresh)\nroot.dispatchEvent(\n  new CustomEvent('fluere:bring-into-view', {\n    detail: { selector: '[data-row=\"24\"]' },\n    bubbles: true,\n  }),\n)\n","ts",[18,1440,1441,1446,1458,1482,1486,1491,1505,1513,1527,1538,1548,1553],{"__ignoreMap":56},[71,1442,1443],{"class":73,"line":74},[71,1444,1445],{"class":1241},"\u002F\u002F Read-only reflection: read the DOM, never touch the instance\n",[71,1447,1448,1450,1453,1455],{"class":73,"line":99},[71,1449,736],{"class":735},[71,1451,1452],{"class":739}," root",[71,1454,743],{"class":735},[71,1456,1457],{"class":77}," sv.value.$el\n",[71,1459,1460,1462,1465,1468,1471,1474,1477,1479],{"class":73,"line":105},[71,1461,736],{"class":735},[71,1463,1464],{"class":77}," { ",[71,1466,1467],{"class":739},"scrollY",[71,1469,1470],{"class":77},", ",[71,1472,1473],{"class":739},"scrollMaxY",[71,1475,1476],{"class":77}," } ",[71,1478,89],{"class":735},[71,1480,1481],{"class":77}," root.dataset\n",[71,1483,1484],{"class":73,"line":289},[71,1485,708],{"emptyLinePlaceholder":707},[71,1487,1488],{"class":73,"line":310},[71,1489,1490],{"class":1241},"\u002F\u002F Command + receipt\n",[71,1492,1493,1496,1498,1500,1502],{"class":73,"line":588},[71,1494,1495],{"class":77},"root.",[71,1497,1351],{"class":85},[71,1499,827],{"class":77},[71,1501,1356],{"class":92},[71,1503,1504],{"class":77},", refresh)\n",[71,1506,1507,1509,1511],{"class":73,"line":608},[71,1508,1495],{"class":77},[71,1510,1282],{"class":85},[71,1512,1285],{"class":77},[71,1514,1515,1517,1519,1521,1524],{"class":73,"line":614},[71,1516,1290],{"class":735},[71,1518,1293],{"class":85},[71,1520,827],{"class":77},[71,1522,1523],{"class":92},"'fluere:bring-into-view'",[71,1525,1526],{"class":77},", {\n",[71,1528,1529,1532,1535],{"class":73,"line":620},[71,1530,1531],{"class":77},"    detail: { selector: ",[71,1533,1534],{"class":92},"'[data-row=\"24\"]'",[71,1536,1537],{"class":77}," },\n",[71,1539,1540,1543,1545],{"class":73,"line":630},[71,1541,1542],{"class":77},"    bubbles: ",[71,1544,1362],{"class":739},[71,1546,1547],{"class":77},",\n",[71,1549,1550],{"class":73,"line":653},[71,1551,1552],{"class":77},"  }),\n",[71,1554,1555],{"class":73,"line":674},[71,1556,1232],{"class":77},[1558,1559,1560],"blockquote",{},[14,1561,1562,1565,1566,1470,1569,1547,1572,1575,1576,1579,1580,1583,1584,1586,1587,1590],{},[38,1563,1564],{},"Native semantics that still do not apply",": the component is not a native scroll container, so ",[18,1567,1568],{},"el.scrollTop",[18,1570,1571],{},"el.scrollBy()",[18,1573,1574],{},"el.scrollIntoView()",", CDP ",[18,1577,1578],{},"DOM.scrollIntoViewIfNeeded",", the browser's 「find in page」 and\n",[18,1581,1582],{},"#:~:text="," text fragment anchoring still do not work — use the command events above instead.\nThere is another existing path: when focus enters an element in the content, the component automatically scrolls it into view per ",[18,1585,330],{},"\n(aligned with WinUI, see ",[18,1588,1589],{},"bringIntoView"," in the 「Methods」 table).",[23,1592,1594],{"id":1593},"api","API",[983,1596,1598],{"id":1597},"props","Props",[988,1600,1601,1616],{},[991,1602,1603],{},[994,1604,1605,1608,1611,1614],{},[997,1606,1607],{},"Prop",[997,1609,1610],{},"Type",[997,1612,1613],{},"Default",[997,1615,1002],{},[1004,1617,1618,1638,1658,1676,1699,1717,1736,1754,1772,1790,1808,1826,1846,1866,1885,1914,1935,1955,1973,1995],{},[994,1619,1620,1625,1630,1635],{},[1009,1621,1622],{},[18,1623,1624],{},"contentOrientation",[1009,1626,1627],{},[18,1628,1629],{},"'vertical' | 'horizontal' | 'none' | 'both'",[1009,1631,1632],{},[18,1633,1634],{},"'vertical'",[1009,1636,1637],{},"Content layout direction, determines how the content is constrained by the viewport",[994,1639,1640,1645,1650,1655],{},[1009,1641,1642],{},[18,1643,1644],{},"horizontalScrollMode",[1009,1646,1647],{},[18,1648,1649],{},"'enabled' | 'disabled'",[1009,1651,1652],{},[18,1653,1654],{},"'enabled'",[1009,1656,1657],{},"Whether the user may scroll horizontally",[994,1659,1660,1665,1669,1673],{},[1009,1661,1662],{},[18,1663,1664],{},"verticalScrollMode",[1009,1666,1667],{},[18,1668,1649],{},[1009,1670,1671],{},[18,1672,1654],{},[1009,1674,1675],{},"Whether the user may scroll vertically",[994,1677,1678,1683,1688,1693],{},[1009,1679,1680],{},[18,1681,1682],{},"horizontalScrollBarVisibility",[1009,1684,1685],{},[18,1686,1687],{},"'auto' | 'visible' | 'hidden'",[1009,1689,1690],{},[18,1691,1692],{},"'auto'",[1009,1694,1695,1696,1698],{},"Horizontal scrollbar display strategy (",[18,1697,434],{}," is overlay, shown only when the pointer enters the container)",[994,1700,1701,1706,1710,1714],{},[1009,1702,1703],{},[18,1704,1705],{},"verticalScrollBarVisibility",[1009,1707,1708],{},[18,1709,1687],{},[1009,1711,1712],{},[18,1713,1692],{},[1009,1715,1716],{},"Vertical scrollbar display strategy",[994,1718,1719,1724,1729,1733],{},[1009,1720,1721],{},[18,1722,1723],{},"horizontalScrollChainMode",[1009,1725,1726],{},[18,1727,1728],{},"'auto' | 'always' | 'never'",[1009,1730,1731],{},[18,1732,1692],{},[1009,1734,1735],{},"Chaining of horizontal scroll; see the 「Wheel ownership」 note below",[994,1737,1738,1743,1747,1751],{},[1009,1739,1740],{},[18,1741,1742],{},"verticalScrollChainMode",[1009,1744,1745],{},[18,1746,1728],{},[1009,1748,1749],{},[18,1750,1692],{},[1009,1752,1753],{},"Chaining of vertical scroll, same semantics as above",[994,1755,1756,1761,1765,1769],{},[1009,1757,1758],{},[18,1759,1760],{},"horizontalScrollRailMode",[1009,1762,1763],{},[18,1764,1649],{},[1009,1766,1767],{},[18,1768,1654],{},[1009,1770,1771],{},"Horizontal touch panning rail",[994,1773,1774,1779,1783,1787],{},[1009,1775,1776],{},[18,1777,1778],{},"verticalScrollRailMode",[1009,1780,1781],{},[18,1782,1649],{},[1009,1784,1785],{},[18,1786,1654],{},[1009,1788,1789],{},"Vertical touch panning rail",[994,1791,1792,1797,1801,1805],{},[1009,1793,1794],{},[18,1795,1796],{},"zoomMode",[1009,1798,1799],{},[18,1800,1649],{},[1009,1802,1803],{},[18,1804,1193],{},[1009,1806,1807],{},"Whether the user may zoom",[994,1809,1810,1815,1819,1823],{},[1009,1811,1812],{},[18,1813,1814],{},"zoomChainMode",[1009,1816,1817],{},[18,1818,1728],{},[1009,1820,1821],{},[18,1822,1692],{},[1009,1824,1825],{},"Chaining of zoom",[994,1827,1828,1833,1838,1843],{},[1009,1829,1830],{},[18,1831,1832],{},"ignoredInputKinds",[1009,1834,1835],{},[18,1836,1837],{},"ScrollingInputKinds | ScrollingInputKinds[]",[1009,1839,1840],{},[18,1841,1842],{},"[]",[1009,1844,1845],{},"Input kinds to ignore; a single value or an array can be passed; such inputs are not responded to",[994,1847,1848,1853,1858,1863],{},[1009,1849,1850],{},[18,1851,1852],{},"minZoomFactor",[1009,1854,1855],{},[18,1856,1857],{},"number",[1009,1859,1860],{},[18,1861,1862],{},"0.1",[1009,1864,1865],{},"Minimum zoom factor",[994,1867,1868,1873,1877,1882],{},[1009,1869,1870],{},[18,1871,1872],{},"maxZoomFactor",[1009,1874,1875],{},[18,1876,1857],{},[1009,1878,1879],{},[18,1880,1881],{},"10",[1009,1883,1884],{},"Maximum zoom factor",[994,1886,1887,1892,1896,1901],{},[1009,1888,1889],{},[18,1890,1891],{},"horizontalAnchorRatio",[1009,1893,1894],{},[18,1895,1857],{},[1009,1897,1898],{},[18,1899,1900],{},"NaN",[1009,1902,1903,1904,1906,1907,1909,1910,1913],{},"Horizontal anchor ratio (0–1); ",[18,1905,1900],{}," disables horizontal anchoring; ",[18,1908,938],{}," keeps the content's left edge against the viewport's left edge, ",[18,1911,1912],{},"1"," keeps the right edge against the right edge",[994,1915,1916,1921,1925,1929],{},[1009,1917,1918],{},[18,1919,1920],{},"verticalAnchorRatio",[1009,1922,1923],{},[18,1924,1857],{},[1009,1926,1927],{},[18,1928,1900],{},[1009,1930,1931,1932,1934],{},"Vertical anchor ratio (0–1); ",[18,1933,1900],{}," disables vertical anchoring",[994,1936,1937,1942,1947,1952],{},[1009,1938,1939],{},[18,1940,1941],{},"background",[1009,1943,1944],{},[18,1945,1946],{},"string",[1009,1948,1949],{},[18,1950,1951],{},"—",[1009,1953,1954],{},"Background color of the content area",[994,1956,1957,1962,1966,1970],{},[1009,1958,1959],{},[18,1960,1961],{},"tabIndex",[1009,1963,1964],{},[18,1965,1857],{},[1009,1967,1968],{},[18,1969,938],{},[1009,1971,1972],{},"Keyboard focusable (Arrow \u002F PageUp \u002F Home etc. arrow keys scroll)",[994,1974,1975,1980,1984,1988],{},[1009,1976,1977],{},[18,1978,1979],{},"label",[1009,1981,1982],{},[18,1983,1946],{},[1009,1985,1986],{},[18,1987,1951],{},[1009,1989,1990,1991,1994],{},"Accessible name; once set the root element carries ",[18,1992,1993],{},"role=\"region\"",", letting screen readers and the accessibility-tree Agent recognize the scroll area",[994,1996,1997,2001,2006,2010],{},[1009,1998,1999],{},[18,2000,1197],{},[1009,2002,2003],{},[18,2004,2005],{},"boolean",[1009,2007,2008],{},[18,2009,1362],{},[1009,2011,2012,2013,2015],{},"Whether to respond to ",[18,2014,980],{}," DOM command events (see 「Agent \u002F Automation access」); the read-only state reflection is always kept",[983,2017,772],{"id":2018},"events-1",[988,2020,2021,2033],{},[991,2022,2023],{},[994,2024,2025,2028,2031],{},[997,2026,2027],{},"Event",[997,2029,2030],{},"Payload",[997,2032,1002],{},[1004,2034,2035,2046,2058,2071,2086,2102,2117,2134,2149],{},[994,2036,2037,2041,2043],{},[1009,2038,2039],{},[18,2040,594],{},[1009,2042,1951],{},[1009,2044,2045],{},"The viewport offset or zoom changed (fires continuously during interaction)",[994,2047,2048,2053,2055],{},[1009,2049,2050],{},[18,2051,2052],{},"extent-changed",[1009,2054,1951],{},[1009,2056,2057],{},"The content area size changed",[994,2059,2060,2064,2068],{},[1009,2061,2062],{},[18,2063,842],{},[1009,2065,2066],{},[18,2067,1068],{},[1009,2069,2070],{},"The interaction state changed",[994,2072,2073,2078,2083],{},[1009,2074,2075],{},[18,2076,2077],{},"scroll-animation-starting",[1009,2079,2080],{},[18,2081,2082],{},"ScrollingScrollAnimationStartingEventArgs",[1009,2084,2085],{},"A scroll animation is about to start; the target offset can be rewritten",[994,2087,2088,2092,2097],{},[1009,2089,2090],{},[18,2091,870],{},[1009,2093,2094],{},[18,2095,2096],{},"ScrollingScrollCompletedEventArgs",[1009,2098,2099,2100,833],{},"A scroll ended (includes ",[18,2101,889],{},[994,2103,2104,2109,2114],{},[1009,2105,2106],{},[18,2107,2108],{},"zoom-animation-starting",[1009,2110,2111],{},[18,2112,2113],{},"ScrollingZoomAnimationStartingEventArgs",[1009,2115,2116],{},"A zoom animation is about to start",[994,2118,2119,2124,2129],{},[1009,2120,2121],{},[18,2122,2123],{},"zoom-completed",[1009,2125,2126],{},[18,2127,2128],{},"ScrollingZoomCompletedEventArgs",[1009,2130,2131,2132,833],{},"A zoom ended (includes ",[18,2133,889],{},[994,2135,2136,2141,2146],{},[1009,2137,2138],{},[18,2139,2140],{},"anchor-requested",[1009,2142,2143],{},[18,2144,2145],{},"ScrollingAnchorRequestedEventArgs",[1009,2147,2148],{},"An anchor is requested (a custom anchor element can be returned)",[994,2150,2151,2155,2160],{},[1009,2152,2153],{},[18,2154,334],{},[1009,2156,2157],{},[18,2158,2159],{},"ScrollingBringingIntoViewEventArgs",[1009,2161,2162],{},"About to scroll an element into view; the target offset can be rewritten",[983,2164,2166],{"id":2165},"methods","Methods",[14,2168,2169,2170,2172,2173,342,2175,886],{},"Called through a template ref; each returns the ",[18,2171,889],{}," of this operation, for matching against the payloads of ",[18,2174,870],{},[18,2176,2123],{},[988,2178,2179,2191],{},[991,2180,2181],{},[994,2182,2183,2186,2189],{},[997,2184,2185],{},"Method",[997,2187,2188],{},"Signature",[997,2190,1002],{},[1004,2192,2193,2208,2222,2241,2256,2271,2286,2300,2318],{},[994,2194,2195,2200,2205],{},[1009,2196,2197],{},[18,2198,2199],{},"scrollTo",[1009,2201,2202],{},[18,2203,2204],{},"(horizontalOffset: number, verticalOffset: number, options?: ScrollingScrollOptions) => number",[1009,2206,2207],{},"Scroll to an absolute offset",[994,2209,2210,2214,2219],{},[1009,2211,2212],{},[18,2213,942],{},[1009,2215,2216],{},[18,2217,2218],{},"(horizontalOffsetDelta: number, verticalOffsetDelta: number, options?: ScrollingScrollOptions) => number",[1009,2220,2221],{},"Scroll by a delta",[994,2223,2224,2229,2234],{},[1009,2225,2226],{},[18,2227,2228],{},"zoomTo",[1009,2230,2231],{},[18,2232,2233],{},"(zoom: number, centerPoint?: { x, y } | null, options?: ScrollingZoomOptions) => number",[1009,2235,2236,2237,2240],{},"Zoom to a specified factor; ",[18,2238,2239],{},"centerPoint"," is the zoom center (defaults to the viewport center)",[994,2242,2243,2248,2253],{},[1009,2244,2245],{},[18,2246,2247],{},"zoomBy",[1009,2249,2250],{},[18,2251,2252],{},"(zoomFactorDelta: number, centerPoint?: { x, y } | null, options?: ScrollingZoomOptions) => number",[1009,2254,2255],{},"Zoom by a delta",[994,2257,2258,2263,2268],{},[1009,2259,2260],{},[18,2261,2262],{},"addScrollVelocity",[1009,2264,2265],{},[18,2266,2267],{},"(offsetsVelocity: { x, y }, inertiaDecayRate?: { x, y } | null) => number",[1009,2269,2270],{},"Append scroll velocity (inertial scrolling)",[994,2272,2273,2278,2283],{},[1009,2274,2275],{},[18,2276,2277],{},"addZoomVelocity",[1009,2279,2280],{},[18,2281,2282],{},"(zoomFactorVelocity: number, centerPoint?: { x, y } | null, inertiaDecayRate?: number | null) => number",[1009,2284,2285],{},"Append zoom velocity",[994,2287,2288,2292,2297],{},[1009,2289,2290],{},[18,2291,1589],{},[1009,2293,2294],{},[18,2295,2296],{},"(element: HTMLElement, options?: { margin?: number }) => number",[1009,2298,2299],{},"Scroll an element into view (auto-triggered by the focused element)",[994,2301,2302,2307,2312],{},[1009,2303,2304],{},[18,2305,2306],{},"registerAnchorCandidate",[1009,2308,2309],{},[18,2310,2311],{},"(element: HTMLElement) => void",[1009,2313,2314,2315,833],{},"Register an anchor candidate (or mark with ",[18,2316,2317],{},"data-can-scroll-anchor",[994,2319,2320,2325,2329],{},[1009,2321,2322],{},[18,2323,2324],{},"unregisterAnchorCandidate",[1009,2326,2327],{},[18,2328,2311],{},[1009,2330,2331],{},"Unregister an anchor candidate",[14,2333,2334,342,2337,2340,2341,2344,2345,2347,2348,2350,2351,886],{},[18,2335,2336],{},"ScrollingScrollOptions",[18,2338,2339],{},"ScrollingZoomOptions"," take ",[18,2342,2343],{},"'disabled' \\| 'enabled' \\| 'auto'"," for ",[18,2346,1189],{}," (default ",[18,2349,1692],{},"), plus a placeholding ",[18,2352,2353],{},"snapPointsMode",[983,2355,2357],{"id":2356},"readonly-properties","Readonly properties",[988,2359,2360,2371],{},[991,2361,2362],{},[994,2363,2364,2367,2369],{},[997,2365,2366],{},"Readonly property",[997,2368,1610],{},[997,2370,1002],{},[1004,2372,2373,2387,2401,2414,2428,2442,2456,2470,2484,2498,2512],{},[994,2374,2375,2380,2384],{},[1009,2376,2377],{},[18,2378,2379],{},"horizontalOffset",[1009,2381,2382],{},[18,2383,1857],{},[1009,2385,2386],{},"Current horizontal offset",[994,2388,2389,2394,2398],{},[1009,2390,2391],{},[18,2392,2393],{},"verticalOffset",[1009,2395,2396],{},[18,2397,1857],{},[1009,2399,2400],{},"Current vertical offset",[994,2402,2403,2408,2412],{},[1009,2404,2405],{},[18,2406,2407],{},"zoomFactor",[1009,2409,2410],{},[18,2411,1857],{},[1009,2413,1056],{},[994,2415,2416,2421,2425],{},[1009,2417,2418],{},[18,2419,2420],{},"extentWidth",[1009,2422,2423],{},[18,2424,1857],{},[1009,2426,2427],{},"Content area width",[994,2429,2430,2435,2439],{},[1009,2431,2432],{},[18,2433,2434],{},"extentHeight",[1009,2436,2437],{},[18,2438,1857],{},[1009,2440,2441],{},"Content area height",[994,2443,2444,2449,2453],{},[1009,2445,2446],{},[18,2447,2448],{},"viewportWidth",[1009,2450,2451],{},[18,2452,1857],{},[1009,2454,2455],{},"Viewport width",[994,2457,2458,2463,2467],{},[1009,2459,2460],{},[18,2461,2462],{},"viewportHeight",[1009,2464,2465],{},[18,2466,1857],{},[1009,2468,2469],{},"Viewport height",[994,2471,2472,2477,2481],{},[1009,2473,2474],{},[18,2475,2476],{},"scrollableWidth",[1009,2478,2479],{},[18,2480,1857],{},[1009,2482,2483],{},"Scrollable width (content − viewport)",[994,2485,2486,2491,2495],{},[1009,2487,2488],{},[18,2489,2490],{},"scrollableHeight",[1009,2492,2493],{},[18,2494,1857],{},[1009,2496,2497],{},"Scrollable height (content − viewport)",[994,2499,2500,2505,2509],{},[1009,2501,2502],{},[18,2503,2504],{},"state",[1009,2506,2507],{},[18,2508,1068],{},[1009,2510,2511],{},"Current interaction state",[994,2513,2514,2519,2524],{},[1009,2515,2516],{},[18,2517,2518],{},"currentAnchor",[1009,2520,2521],{},[18,2522,2523],{},"HTMLElement | null",[1009,2525,2526],{},"The currently active anchor element",[983,2528,2530],{"id":2529},"slots","Slots",[988,2532,2533,2542],{},[991,2534,2535],{},[994,2536,2537,2540],{},[997,2538,2539],{},"Slot",[997,2541,1002],{},[1004,2543,2544],{},[994,2545,2546,2551],{},[1009,2547,2548],{},[18,2549,2550],{},"default",[1009,2552,2553],{},"Scrollable content",[1558,2555,2556],{},[14,2557,2558,2561,2562,2565,2566,342,2568,2571,2572,2575,2576,2579],{},[38,2559,2560],{},"Wheel ownership"," (aligned with WinUI 3): when the pointer is inside this component and that direction is actually scrollable, this wheel is owned exclusively by the component — even at the scroll limit it will not scroll the outer ScrollView; when ",[18,2563,2564],{},"horizontal\u002FverticalScrollChainMode"," is ",[18,2567,434],{},[18,2569,2570],{},"never",", reaching the limit swallows the wheel (equivalent to ",[18,2573,2574],{},"overscroll-behavior: contain","), and only when it is ",[18,2577,2578],{},"always"," is the unconsumed remaining delta explicitly handed to the outer view. When the current direction has no scrollable content, or that direction is disabled, the wheel is not owned and bubbles to the outer view. Touch is owned exclusively by native touch events and pen is exclusively captured by the pointer; neither goes through this determination.",[2581,2582,2583],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":56,"searchDepth":99,"depth":99,"links":2585},[2586,2587,2588,2589,2590,2591,2592,2593,2594,2595,2599],{"id":25,"depth":99,"text":26},{"id":115,"depth":99,"text":116},{"id":176,"depth":99,"text":177},{"id":235,"depth":99,"text":236},{"id":319,"depth":99,"text":320},{"id":355,"depth":99,"text":356},{"id":424,"depth":99,"text":425},{"id":514,"depth":99,"text":515},{"id":771,"depth":99,"text":772},{"id":915,"depth":99,"text":916,"children":2596},[2597,2598],{"id":985,"depth":105,"text":986},{"id":1082,"depth":105,"text":976},{"id":1593,"depth":99,"text":1594,"children":2600},[2601,2602,2603,2604,2605],{"id":1597,"depth":105,"text":1598},{"id":2018,"depth":105,"text":772},{"id":2165,"depth":105,"text":2166},{"id":2356,"depth":105,"text":2357},{"id":2529,"depth":105,"text":2530},"[object Object]","md",{},null,"\u002Fen\u002Fcomponents\u002Fscroll-view",{"title":5,"description":2612},{"A container control aligned with the WinUI 3 ScrollView":2613,"nav":2614},"scrolls, pans, and zooms content that exceeds the viewport.",{"title":5},"en\u002Fcomponents\u002Fscroll-view","_6foGLHJfi9JsIuzln2YPwa794rNGolFyMivxS-0vWE",{"id":2618,"title":2619,"body":2620,"description":4876,"extension":2607,"meta":4877,"nav":4878,"navigation":707,"path":4879,"seo":4880,"stem":4881,"__hash__":4882},"content\u002Fcomponents\u002Fscroll-view.md","Scroll View 滚动视图",{"type":7,"value":2621,"toc":4854},[2622,2625,2631,2635,2641,2651,2691,2694,2699,2745,2748,2753,2799,2802,2809,2877,2880,2892,2904,2907,2915,2967,2970,2984,3048,3052,3061,3256,3259,3274,3382,3386,3420,3437,3440,3509,3519,3521,3530,3610,3628,3760,3922,3951,3953,3957,4336,4340,4472,4476,4487,4625,4644,4648,4805,4809,4830,4852],[10,2623,2619],{"id":2624},"scroll-view-滚动视图",[14,2626,2627,2628,2630],{},"对齐 WinUI 3 ",[18,2629,20],{}," 的容器控件：内容超出视口时滚动、平移、缩放，滚动条为 WinUI 3 的\noverlay 样式（2px 细滑块，指针进入容器即显示；指针移到滚动条上时滑块加粗为 6px、药丸轨道连同两端步进按钮展开，离开后收起，2s 无交互整体淡出）。",[23,2632,2634],{"id":2633},"基础用法垂直","基础用法（垂直）",[14,2636,2637,2638,2640],{},"默认 ",[18,2639,32],{},"，滚轮 \u002F 触控平移 \u002F 拖动滚动条均可滚动。",[14,2642,2643,2644,2647,2648,2650],{},"触控平移由",[38,2645,2646],{},"原生 Touch Events"," 独占手势（监听器非 passive，",[18,2649,48],{}," 时阻止浏览器默认行为），\n与「笔」分开处理；因此内容区内的原生滚动容器（如代码块）在触摸下不可滑动，属既有的触控模型限制。",[51,2652,2653,2657],{"title":2634},[54,2654,2655],{"v-slot:preview":56},[58,2656],{},[54,2658,2659],{"v-slot:code":56},[63,2660,2662],{"className":65,"code":2661,"language":67,"meta":56,"style":56},"\u003CFluereScrollView class=\"h-80\">\n  \u003Cdiv v-for=\"row in rows\" :key=\"row\">第 {{ row }} 行内容 · Windows 11 原生滚动体验\u003C\u002Fdiv>\n\u003C\u002FFluereScrollView>\n",[18,2663,2664,2678,2683],{"__ignoreMap":56},[71,2665,2666,2668,2670,2672,2674,2676],{"class":73,"line":74},[71,2667,78],{"class":77},[71,2669,82],{"class":81},[71,2671,86],{"class":85},[71,2673,89],{"class":77},[71,2675,93],{"class":92},[71,2677,96],{"class":77},[71,2679,2680],{"class":73,"line":99},[71,2681,2682],{"class":77},"  \u003Cdiv v-for=\"row in rows\" :key=\"row\">第 {{ row }} 行内容 · Windows 11 原生滚动体验\u003C\u002Fdiv>\n",[71,2684,2685,2687,2689],{"class":73,"line":105},[71,2686,108],{"class":77},[71,2688,82],{"class":81},[71,2690,96],{"class":77},[23,2692,2693],{"id":2693},"横向滚动",[14,2695,2696,2698],{},[18,2697,122],{},"，内容高度约束到视口，宽度自由增长。Shift + 滚轮或触控横向滑动。",[51,2700,2701,2705],{"title":2693},[54,2702,2703],{"v-slot:preview":56},[129,2704],{},[54,2706,2707],{"v-slot:code":56},[63,2708,2710],{"className":65,"code":2709,"language":67,"meta":56,"style":56},"\u003CFluereScrollView class=\"h-40\" content-orientation=\"horizontal\">\n  \u003Cdiv class=\"flex gap-fluent-m\">…卡片列表…\u003C\u002Fdiv>\n\u003C\u002FFluereScrollView>\n",[18,2711,2712,2732,2737],{"__ignoreMap":56},[71,2713,2714,2716,2718,2720,2722,2724,2726,2728,2730],{"class":73,"line":74},[71,2715,78],{"class":77},[71,2717,82],{"class":81},[71,2719,86],{"class":85},[71,2721,89],{"class":77},[71,2723,150],{"class":92},[71,2725,153],{"class":85},[71,2727,89],{"class":77},[71,2729,158],{"class":92},[71,2731,96],{"class":77},[71,2733,2734],{"class":73,"line":99},[71,2735,2736],{"class":77},"  \u003Cdiv class=\"flex gap-fluent-m\">…卡片列表…\u003C\u002Fdiv>\n",[71,2738,2739,2741,2743],{"class":73,"line":105},[71,2740,108],{"class":77},[71,2742,82],{"class":81},[71,2744,96],{"class":77},[23,2746,2747],{"id":2747},"双向滚动",[14,2749,2750,2752],{},[18,2751,182],{},"，内容在横向与纵向均不受约束。",[51,2754,2755,2759],{"title":2747},[54,2756,2757],{"v-slot:preview":56},[189,2758],{},[54,2760,2761],{"v-slot:code":56},[63,2762,2764],{"className":65,"code":2763,"language":67,"meta":56,"style":56},"\u003CFluereScrollView class=\"h-72\" content-orientation=\"both\">\n  \u003Cdiv class=\"grid grid-cols-6 gap-fluent-m\">…单元格…\u003C\u002Fdiv>\n\u003C\u002FFluereScrollView>\n",[18,2765,2766,2786,2791],{"__ignoreMap":56},[71,2767,2768,2770,2772,2774,2776,2778,2780,2782,2784],{"class":73,"line":74},[71,2769,78],{"class":77},[71,2771,82],{"class":81},[71,2773,86],{"class":85},[71,2775,89],{"class":77},[71,2777,210],{"class":92},[71,2779,153],{"class":85},[71,2781,89],{"class":77},[71,2783,217],{"class":92},[71,2785,96],{"class":77},[71,2787,2788],{"class":73,"line":99},[71,2789,2790],{"class":77},"  \u003Cdiv class=\"grid grid-cols-6 gap-fluent-m\">…单元格…\u003C\u002Fdiv>\n",[71,2792,2793,2795,2797],{"class":73,"line":105},[71,2794,108],{"class":77},[71,2796,82],{"class":81},[71,2798,96],{"class":77},[23,2800,2801],{"id":2801},"嵌套滚动",[14,2803,2804,2805,2808],{},"内层 ScrollView 位于外层内容之中。",[38,2806,2807],{},"鼠标滚轮归属","对齐 WinUI 3：指针停在内层上时由内层独占滚轮，\n即使内层已滚到极限，外层也不会跟着滚动；把指针移到内层之外的外层内容上，滚轮才交给外层（触控由原生触摸事件独占，笔由指针捕获独占）。",[51,2810,2811,2815],{"title":2801},[54,2812,2813],{"v-slot:preview":56},[249,2814],{},[54,2816,2817],{"v-slot:code":56},[63,2818,2820],{"className":65,"code":2819,"language":67,"meta":56,"style":56},"\u003CFluereScrollView class=\"h-96\">\n  \u003C!-- 外层内容 -->\n  \u003CFluereScrollView class=\"h-40\">…内层 A 独占滚轮…\u003C\u002FFluereScrollView>\n  \u003CFluereScrollView class=\"h-40\">…内层 B 独占滚轮…\u003C\u002FFluereScrollView>\n\u003C\u002FFluereScrollView>\n",[18,2821,2822,2836,2841,2850,2869],{"__ignoreMap":56},[71,2823,2824,2826,2828,2830,2832,2834],{"class":73,"line":74},[71,2825,78],{"class":77},[71,2827,82],{"class":81},[71,2829,86],{"class":85},[71,2831,89],{"class":77},[71,2833,270],{"class":92},[71,2835,96],{"class":77},[71,2837,2838],{"class":73,"line":99},[71,2839,2840],{"class":77},"  \u003C!-- 外层内容 -->\n",[71,2842,2843,2846,2848],{"class":73,"line":105},[71,2844,2845],{"class":77},"  \u003CFluereScrollView class=\"h-40\">…内层 A 独占滚轮…\u003C\u002F",[71,2847,82],{"class":81},[71,2849,96],{"class":77},[71,2851,2852,2854,2856,2858,2860,2862,2865,2867],{"class":73,"line":289},[71,2853,292],{"class":77},[71,2855,82],{"class":81},[71,2857,86],{"class":85},[71,2859,89],{"class":77},[71,2861,150],{"class":92},[71,2863,2864],{"class":77},">…内层 B 独占滚轮…\u003C\u002F",[71,2866,82],{"class":81},[71,2868,96],{"class":77},[71,2870,2871,2873,2875],{"class":73,"line":310},[71,2872,108],{"class":77},[71,2874,82],{"class":81},[71,2876,96],{"class":77},[23,2878,2879],{"id":2879},"焦点滚动",[14,2881,2882,2883,2885,2886,2888,2889,2891],{},"焦点（Tab 或程序化 ",[18,2884,326],{},"）进入内容内的元素时，元素自动滚进视口 —— 对齐 WinUI\n",[18,2887,330],{},"（缺省开启），键盘用户不会把焦点留在视口之外；元素已在视口内时不产生动画。\n该次滚动同样触发 ",[18,2890,334],{}," 事件，可在回调中取消或改写目标偏移。",[14,2893,2894,2895,342,2897,342,2899,342,2901,2903],{},"容器获得焦点（或焦点在内容内）时，方向键、PageUp \u002F PageDown、Home \u002F End 滚动视图；命中\n",[18,2896,341],{},[18,2898,345],{},[18,2900,348],{},[18,2902,351],{}," 时按键交还给输入控件。",[23,2905,2906],{"id":2906},"缩放",[14,2908,2909,2911,2912,2914],{},[18,2910,361],{},"：Ctrl \u002F Cmd + 滚轮或双指捏合缩放，缩放中心为指针位置。对齐 WinUI 的\n",[18,2913,365],{}," 约束。",[51,2916,2917,2921],{"title":2906},[54,2918,2919],{"v-slot:preview":56},[372,2920],{},[54,2922,2923],{"v-slot:code":56},[63,2924,2926],{"className":65,"code":2925,"language":67,"meta":56,"style":56},"\u003CFluereScrollView class=\"h-80\" content-orientation=\"both\" zoom-mode=\"enabled\">\n  \u003C!-- Ctrl \u002F Cmd + 滚轮 或双指捏合缩放 -->\n\u003C\u002FFluereScrollView>\n",[18,2927,2928,2954,2959],{"__ignoreMap":56},[71,2929,2930,2932,2934,2936,2938,2940,2942,2944,2946,2948,2950,2952],{"class":73,"line":74},[71,2931,78],{"class":77},[71,2933,82],{"class":81},[71,2935,86],{"class":85},[71,2937,89],{"class":77},[71,2939,93],{"class":92},[71,2941,153],{"class":85},[71,2943,89],{"class":77},[71,2945,217],{"class":92},[71,2947,401],{"class":85},[71,2949,89],{"class":77},[71,2951,406],{"class":92},[71,2953,96],{"class":77},[71,2955,2956],{"class":73,"line":99},[71,2957,2958],{"class":77},"  \u003C!-- Ctrl \u002F Cmd + 滚轮 或双指捏合缩放 -->\n",[71,2960,2961,2963,2965],{"class":73,"line":105},[71,2962,108],{"class":77},[71,2964,82],{"class":81},[71,2966,96],{"class":77},[23,2968,2969],{"id":2969},"滚动条可见性",[14,2971,2972,2974,2975,2977,2978,2980,2981,2983],{},[18,2973,430],{}," 支持 ",[18,2976,434],{},"（默认，overlay）\u002F ",[18,2979,438],{},"（常驻）\u002F ",[18,2982,442],{},"（仍可滚动）。",[51,2985,2986,2990],{"title":2969},[54,2987,2988],{"v-slot:preview":56},[449,2989],{},[54,2991,2992],{"v-slot:code":56},[63,2993,2995],{"className":65,"code":2994,"language":67,"meta":56,"style":56},"\u003CFluereScrollView>…auto（默认，overlay）…\u003C\u002FFluereScrollView>\n\u003CFluereScrollView vertical-scroll-bar-visibility=\"visible\">…常驻…\u003C\u002FFluereScrollView>\n\u003CFluereScrollView vertical-scroll-bar-visibility=\"hidden\">…隐藏但可滚动…\u003C\u002FFluereScrollView>\n",[18,2996,2997,3010,3029],{"__ignoreMap":56},[71,2998,2999,3001,3003,3006,3008],{"class":73,"line":74},[71,3000,78],{"class":77},[71,3002,82],{"class":81},[71,3004,3005],{"class":77},">…auto（默认，overlay）…\u003C\u002F",[71,3007,82],{"class":81},[71,3009,96],{"class":77},[71,3011,3012,3014,3016,3018,3020,3022,3025,3027],{"class":73,"line":99},[71,3013,78],{"class":77},[71,3015,82],{"class":81},[71,3017,479],{"class":85},[71,3019,89],{"class":77},[71,3021,484],{"class":92},[71,3023,3024],{"class":77},">…常驻…\u003C\u002F",[71,3026,82],{"class":81},[71,3028,96],{"class":77},[71,3030,3031,3033,3035,3037,3039,3041,3044,3046],{"class":73,"line":105},[71,3032,78],{"class":77},[71,3034,82],{"class":81},[71,3036,479],{"class":85},[71,3038,89],{"class":77},[71,3040,504],{"class":92},[71,3042,3043],{"class":77},">…隐藏但可滚动…\u003C\u002F",[71,3045,82],{"class":81},[71,3047,96],{"class":77},[23,3049,3051],{"id":3050},"程序化-api","程序化 API",[14,3053,3054,3055,3057,3058,3060],{},"对齐 WinUI 方法：",[18,3056,521],{},"（支持动画与 correlation ID），\n以及只读属性 ",[18,3059,525],{},"。完整签名见下方「方法」与「只读属性」两张表。",[51,3062,3063,3067],{"title":3051},[54,3064,3065],{"v-slot:preview":56},[532,3066],{},[54,3068,3069],{"v-slot:code":56},[63,3070,3072],{"className":65,"code":3071,"language":67,"meta":56,"style":56},"\u003Ctemplate>\n  \u003CFluereScrollView\n    ref=\"sv\"\n    content-orientation=\"both\"\n    zoom-mode=\"enabled\"\n    @view-changed=\"refreshReadout\"\n  >\n    …内容…\n  \u003C\u002FFluereScrollView>\n  \u003Cbutton @click=\"sv?.scrollBy(0, 120)\">下滚 120px\u003C\u002Fbutton>\n  \u003Cbutton @click=\"sv?.scrollTo(0, 0)\">回到顶部\u003C\u002Fbutton>\n  \u003Cbutton @click=\"sv?.zoomBy(0.25)\">放大\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst sv = ref\u003CInstanceType\u003Ctypeof FluereScrollView>>()\n\u003C\u002Fscript>\n",[18,3073,3074,3082,3088,3096,3104,3112,3126,3130,3135,3143,3162,3181,3200,3208,3212,3228,3248],{"__ignoreMap":56},[71,3075,3076,3078,3080],{"class":73,"line":74},[71,3077,78],{"class":77},[71,3079,54],{"class":81},[71,3081,96],{"class":77},[71,3083,3084,3086],{"class":73,"line":99},[71,3085,292],{"class":77},[71,3087,555],{"class":81},[71,3089,3090,3092,3094],{"class":73,"line":105},[71,3091,560],{"class":85},[71,3093,89],{"class":77},[71,3095,565],{"class":92},[71,3097,3098,3100,3102],{"class":73,"line":289},[71,3099,570],{"class":85},[71,3101,89],{"class":77},[71,3103,575],{"class":92},[71,3105,3106,3108,3110],{"class":73,"line":310},[71,3107,580],{"class":85},[71,3109,89],{"class":77},[71,3111,585],{"class":92},[71,3113,3114,3116,3118,3120,3122,3124],{"class":73,"line":588},[71,3115,591],{"class":77},[71,3117,594],{"class":85},[71,3119,89],{"class":77},[71,3121,599],{"class":92},[71,3123,602],{"class":77},[71,3125,605],{"class":92},[71,3127,3128],{"class":73,"line":608},[71,3129,611],{"class":77},[71,3131,3132],{"class":73,"line":614},[71,3133,3134],{"class":77},"    …内容…\n",[71,3136,3137,3139,3141],{"class":73,"line":620},[71,3138,623],{"class":77},[71,3140,82],{"class":81},[71,3142,96],{"class":77},[71,3144,3145,3147,3149,3151,3153,3155,3158,3160],{"class":73,"line":630},[71,3146,292],{"class":77},[71,3148,635],{"class":81},[71,3150,638],{"class":85},[71,3152,89],{"class":77},[71,3154,643],{"class":92},[71,3156,3157],{"class":77},">下滚 120px\u003C\u002F",[71,3159,635],{"class":81},[71,3161,96],{"class":77},[71,3163,3164,3166,3168,3170,3172,3174,3177,3179],{"class":73,"line":653},[71,3165,292],{"class":77},[71,3167,635],{"class":81},[71,3169,638],{"class":85},[71,3171,89],{"class":77},[71,3173,664],{"class":92},[71,3175,3176],{"class":77},">回到顶部\u003C\u002F",[71,3178,635],{"class":81},[71,3180,96],{"class":77},[71,3182,3183,3185,3187,3189,3191,3193,3196,3198],{"class":73,"line":674},[71,3184,292],{"class":77},[71,3186,635],{"class":81},[71,3188,638],{"class":85},[71,3190,89],{"class":77},[71,3192,685],{"class":92},[71,3194,3195],{"class":77},">放大\u003C\u002F",[71,3197,635],{"class":81},[71,3199,96],{"class":77},[71,3201,3202,3204,3206],{"class":73,"line":695},[71,3203,108],{"class":77},[71,3205,54],{"class":81},[71,3207,96],{"class":77},[71,3209,3210],{"class":73,"line":704},[71,3211,708],{"emptyLinePlaceholder":707},[71,3213,3214,3216,3218,3220,3222,3224,3226],{"class":73,"line":711},[71,3215,78],{"class":77},[71,3217,716],{"class":81},[71,3219,719],{"class":85},[71,3221,722],{"class":85},[71,3223,89],{"class":77},[71,3225,727],{"class":92},[71,3227,96],{"class":77},[71,3229,3230,3232,3234,3236,3238,3240,3242,3244,3246],{"class":73,"line":732},[71,3231,736],{"class":735},[71,3233,740],{"class":739},[71,3235,743],{"class":735},[71,3237,746],{"class":85},[71,3239,78],{"class":77},[71,3241,751],{"class":85},[71,3243,78],{"class":77},[71,3245,756],{"class":735},[71,3247,759],{"class":77},[71,3249,3250,3252,3254],{"class":73,"line":762},[71,3251,108],{"class":77},[71,3253,716],{"class":81},[71,3255,96],{"class":77},[23,3257,3258],{"id":3258},"事件",[14,3260,3261,3263,3264,3266,3267,3270,3271,3273],{},[18,3262,777],{},"，\n载荷见下方「事件」表。这些是组件事件（",[18,3265,781],{},"）；供页面自动化使用的 ",[38,3268,3269],{},"DOM 命令事件"," 见「Agent \u002F 自动化访问」，\n事件名带 ",[18,3272,789],{}," 前缀，在根元素上派发。",[51,3275,3276,3280],{"title":3258},[54,3277,3278],{"v-slot:preview":56},[796,3279],{},[54,3281,3282],{"v-slot:code":56},[63,3283,3285],{"className":65,"code":3284,"language":67,"meta":56,"style":56},"\u003CFluereScrollView\n  @view-changed=\"logEvent('view-changed')\"\n  @state-changed=\"logEvent(`state → ${$event}`)\"\n  @scroll-completed=\"logEvent(`scroll-completed #${$event.correlationId}`)\"\n>\n  …内容…\n\u003C\u002FFluereScrollView>\n",[18,3286,3287,3293,3313,3337,3365,3369,3374],{"__ignoreMap":56},[71,3288,3289,3291],{"class":73,"line":74},[71,3290,78],{"class":77},[71,3292,555],{"class":81},[71,3294,3295,3297,3299,3301,3303,3305,3307,3309,3311],{"class":73,"line":99},[71,3296,815],{"class":77},[71,3298,594],{"class":85},[71,3300,89],{"class":77},[71,3302,599],{"class":92},[71,3304,824],{"class":85},[71,3306,827],{"class":77},[71,3308,830],{"class":92},[71,3310,833],{"class":77},[71,3312,605],{"class":92},[71,3314,3315,3317,3319,3321,3323,3325,3327,3329,3331,3333,3335],{"class":73,"line":105},[71,3316,815],{"class":77},[71,3318,842],{"class":85},[71,3320,89],{"class":77},[71,3322,599],{"class":92},[71,3324,824],{"class":85},[71,3326,827],{"class":77},[71,3328,853],{"class":92},[71,3330,856],{"class":77},[71,3332,859],{"class":92},[71,3334,833],{"class":77},[71,3336,605],{"class":92},[71,3338,3339,3341,3343,3345,3347,3349,3351,3353,3355,3357,3359,3361,3363],{"class":73,"line":289},[71,3340,815],{"class":77},[71,3342,870],{"class":85},[71,3344,89],{"class":77},[71,3346,599],{"class":92},[71,3348,824],{"class":85},[71,3350,827],{"class":77},[71,3352,881],{"class":92},[71,3354,856],{"class":77},[71,3356,886],{"class":92},[71,3358,889],{"class":77},[71,3360,859],{"class":92},[71,3362,833],{"class":77},[71,3364,605],{"class":92},[71,3366,3367],{"class":73,"line":310},[71,3368,96],{"class":77},[71,3370,3371],{"class":73,"line":588},[71,3372,3373],{"class":77},"  …内容…\n",[71,3375,3376,3378,3380],{"class":73,"line":608},[71,3377,108],{"class":77},[71,3379,82],{"class":81},[71,3381,96],{"class":77},[23,3383,3385],{"id":3384},"agent-自动化访问","Agent \u002F 自动化访问",[14,3387,3388,3389,3391,3392,3394,3395,3398,3399,3401,3402,3404,3405,342,3407,342,3409,3411,3412,3415,3416,3419],{},"本组件的偏移由内容 ",[18,3390,922],{}," 表达、presenter 是 ",[18,3393,926],{},"（",[38,3396,3397],{},"不是原生滚动容器","），\n因此浏览器与自动化工具的原生滚动语义在这里不成立：",[18,3400,934],{}," 恒为 ",[18,3403,938],{},"，\n",[18,3406,942],{},[18,3408,945],{},[18,3410,948],{}," 都找不到可滚动祖先\n（Playwright 点击视口外元素前的自动滚动同样失效，这也是\n",[951,3413,956],{"href":953,"rel":3414},[955]," 记录的那条坑）。组件为此提供两条 DOM 通路，\n",[38,3417,3418],{},"都不需要接触组件实例","：",[963,3421,3422,3428],{},[966,3423,3424,3427],{},[38,3425,3426],{},"只读反射","：根元素始终带一组状态属性，用来判断「动没动、还剩多少」；",[966,3429,3430,3433,3434,3436],{},[38,3431,3432],{},"命令事件","：在根元素上派发 ",[18,3435,980],{}," 事件即可驱动滚动，落地后收到回执。",[983,3438,3439],{"id":3439},"只读反射属性",[988,3441,3442,3452],{},[991,3443,3444],{},[994,3445,3446,3449],{},[997,3447,3448],{},"属性（Attribute）",[997,3450,3451],{},"说明",[1004,3453,3454,3463,3472,3481,3490,3499],{},[994,3455,3456,3460],{},[1009,3457,3458],{},[18,3459,1013],{},[1009,3461,3462],{},"当前水平偏移（像素，取整）",[994,3464,3465,3469],{},[1009,3466,3467],{},[18,3468,1023],{},[1009,3470,3471],{},"当前垂直偏移（像素，取整）",[994,3473,3474,3478],{},[1009,3475,3476],{},[18,3477,1033],{},[1009,3479,3480],{},"可滚动宽度上限（内容 × 缩放 − 视口，取整）",[994,3482,3483,3487],{},[1009,3484,3485],{},[18,3486,1043],{},[1009,3488,3489],{},"可滚动高度上限，取整",[994,3491,3492,3496],{},[1009,3493,3494],{},[18,3495,1053],{},[1009,3497,3498],{},"当前缩放系数",[994,3500,3501,3505],{},[1009,3502,3503],{},[18,3504,1063],{},[1009,3506,3507],{},[18,3508,1068],{},[14,3510,3511,3512,3514,3515,3518],{},"取整后可安全地做相等比较来判断「到底了没有」（",[18,3513,1074],{},"）。\n这些属性在偏移变化时逐帧重写，",[38,3516,3517],{},"不要在 CSS 里匹配它们","（否则动画期间每帧都会触发样式重算；\n仓库有契约测试守着这条约定）。",[983,3520,3432],{"id":3432},[14,3522,3523,3524,3526,3527,3529],{},"在组件根元素（",[18,3525,1088],{},"）上派发，",[18,3528,1092],{},"，因此也可以挂在页面级监听。",[988,3531,3532,3547],{},[991,3533,3534],{},[994,3535,3536,3539,3545],{},[997,3537,3538],{},"事件（DOM 事件）",[997,3540,3541,3542,3544],{},"载荷（",[18,3543,1108],{},"）",[997,3546,3451],{},[1004,3548,3549,3562,3578,3594],{},[994,3550,3551,3555,3559],{},[1009,3552,3553],{},[18,3554,1119],{},[1009,3556,3557],{},[18,3558,1124],{},[1009,3560,3561],{},"滚到绝对偏移；缺省分量保持不变",[994,3563,3564,3568,3572],{},[1009,3565,3566],{},[18,3567,1134],{},[1009,3569,3570],{},[18,3571,1124],{},[1009,3573,3574,3575,3577],{},"按增量滚动；缺省分量按 ",[18,3576,938],{}," 处理",[994,3579,3580,3584,3588],{},[1009,3581,3582],{},[18,3583,1150],{},[1009,3585,3586],{},[18,3587,1155],{},[1009,3589,3590,3591,3593],{},"把内容区内的元素滚入视口（",[18,3592,1161],{}," 优先）",[994,3595,3596,3600,3607],{},[1009,3597,3598],{},[18,3599,1169],{},[1009,3601,3602,3394,3604,3544],{},[18,3603,1174],{},[38,3605,3606],{},"出站",[1009,3608,3609],{},"命令落地后由组件派发，用于等待稳定帧",[14,3611,3612,3613,3615,3616,3618,3619,3621,3622,3624,3625,3627],{},"载荷非法（非有限数、目标不可解析）时是空操作，不抛错；",[18,3614,334],{}," 只接受内容区内的元素。\n",[18,3617,1189],{}," 传 ",[18,3620,1193],{}," 可跳过动画，适合截图前的确定性定位；\n",[18,3623,1197],{}," 设为 ",[18,3626,1201],{}," 可关闭命令事件（只读反射保留）。",[63,3629,3631],{"className":1205,"code":3630,"language":1207,"meta":56,"style":56},"const el = document.querySelector('.fui-scrollview')\n\n\u002F\u002F 1. 先读状态：还需要滚多少？\nconst remaining = Number(el.dataset.scrollMaxY) - Number(el.dataset.scrollY)\n\n\u002F\u002F 2. 派发命令（bubbles 让页面级监听也能收到）\nel.dispatchEvent(\n  new CustomEvent('fluere:scroll-by', { detail: { y: remaining, animationMode: 'disabled' } }),\n)\n\n\u002F\u002F 3. 等回执再截图 \u002F 断言\nawait new Promise((resolve) =>\n  el.addEventListener('fluere:scroll-settled', resolve, { once: true }),\n)\n",[18,3632,3633,3651,3655,3660,3678,3682,3687,3695,3711,3715,3719,3724,3740,3756],{"__ignoreMap":56},[71,3634,3635,3637,3639,3641,3643,3645,3647,3649],{"class":73,"line":74},[71,3636,736],{"class":735},[71,3638,1216],{"class":739},[71,3640,743],{"class":735},[71,3642,1221],{"class":77},[71,3644,1224],{"class":85},[71,3646,827],{"class":77},[71,3648,1229],{"class":92},[71,3650,1232],{"class":77},[71,3652,3653],{"class":73,"line":99},[71,3654,708],{"emptyLinePlaceholder":707},[71,3656,3657],{"class":73,"line":105},[71,3658,3659],{"class":1241},"\u002F\u002F 1. 先读状态：还需要滚多少？\n",[71,3661,3662,3664,3666,3668,3670,3672,3674,3676],{"class":73,"line":289},[71,3663,736],{"class":735},[71,3665,1249],{"class":739},[71,3667,743],{"class":735},[71,3669,1254],{"class":85},[71,3671,1257],{"class":77},[71,3673,1260],{"class":735},[71,3675,1254],{"class":85},[71,3677,1265],{"class":77},[71,3679,3680],{"class":73,"line":310},[71,3681,708],{"emptyLinePlaceholder":707},[71,3683,3684],{"class":73,"line":588},[71,3685,3686],{"class":1241},"\u002F\u002F 2. 派发命令（bubbles 让页面级监听也能收到）\n",[71,3688,3689,3691,3693],{"class":73,"line":608},[71,3690,1279],{"class":77},[71,3692,1282],{"class":85},[71,3694,1285],{"class":77},[71,3696,3697,3699,3701,3703,3705,3707,3709],{"class":73,"line":614},[71,3698,1290],{"class":735},[71,3700,1293],{"class":85},[71,3702,827],{"class":77},[71,3704,1298],{"class":92},[71,3706,1301],{"class":77},[71,3708,1193],{"class":92},[71,3710,1306],{"class":77},[71,3712,3713],{"class":73,"line":620},[71,3714,1232],{"class":77},[71,3716,3717],{"class":73,"line":630},[71,3718,708],{"emptyLinePlaceholder":707},[71,3720,3721],{"class":73,"line":653},[71,3722,3723],{"class":1241},"\u002F\u002F 3. 等回执再截图 \u002F 断言\n",[71,3725,3726,3728,3730,3732,3734,3736,3738],{"class":73,"line":674},[71,3727,1324],{"class":735},[71,3729,1327],{"class":735},[71,3731,1330],{"class":739},[71,3733,1333],{"class":77},[71,3735,1337],{"class":1336},[71,3737,1340],{"class":77},[71,3739,1343],{"class":735},[71,3741,3742,3744,3746,3748,3750,3752,3754],{"class":73,"line":695},[71,3743,1348],{"class":77},[71,3745,1351],{"class":85},[71,3747,827],{"class":77},[71,3749,1356],{"class":92},[71,3751,1359],{"class":77},[71,3753,1362],{"class":739},[71,3755,1365],{"class":77},[71,3757,3758],{"class":73,"line":704},[71,3759,1232],{"class":77},[51,3761,3763,3767],{"title":3762},"Agent 交互面",[54,3764,3765],{"v-slot:preview":56},[1376,3766],{},[54,3768,3769,3819],{"v-slot:code":56},[63,3770,3772],{"className":65,"code":3771,"language":67,"meta":56,"style":56},"\u003CFluereScrollView ref=\"sv\" label=\"日志列表\" @view-changed=\"refresh\">\n  …内容…\n\u003C\u002FFluereScrollView>\n",[18,3773,3774,3807,3811],{"__ignoreMap":56},[71,3775,3776,3778,3780,3782,3784,3786,3788,3790,3793,3795,3797,3799,3801,3803,3805],{"class":73,"line":74},[71,3777,78],{"class":77},[71,3779,82],{"class":81},[71,3781,746],{"class":85},[71,3783,89],{"class":77},[71,3785,1397],{"class":92},[71,3787,1400],{"class":85},[71,3789,89],{"class":77},[71,3791,3792],{"class":92},"\"日志列表\"",[71,3794,1408],{"class":77},[71,3796,594],{"class":85},[71,3798,89],{"class":77},[71,3800,599],{"class":92},[71,3802,1417],{"class":77},[71,3804,599],{"class":92},[71,3806,96],{"class":77},[71,3808,3809],{"class":73,"line":99},[71,3810,3373],{"class":77},[71,3812,3813,3815,3817],{"class":73,"line":105},[71,3814,108],{"class":77},[71,3816,82],{"class":81},[71,3818,96],{"class":77},[63,3820,3822],{"className":1436,"code":3821,"language":1438,"meta":56,"style":56},"\u002F\u002F 只读反射：读 DOM，不碰组件实例\nconst root = sv.value.$el\nconst { scrollY, scrollMaxY } = root.dataset\n\n\u002F\u002F 命令 + 回执\nroot.addEventListener('fluere:scroll-settled', refresh)\nroot.dispatchEvent(\n  new CustomEvent('fluere:bring-into-view', {\n    detail: { selector: '[data-row=\"24\"]' },\n    bubbles: true,\n  }),\n)\n",[18,3823,3824,3829,3839,3857,3861,3866,3878,3886,3898,3906,3914,3918],{"__ignoreMap":56},[71,3825,3826],{"class":73,"line":74},[71,3827,3828],{"class":1241},"\u002F\u002F 只读反射：读 DOM，不碰组件实例\n",[71,3830,3831,3833,3835,3837],{"class":73,"line":99},[71,3832,736],{"class":735},[71,3834,1452],{"class":739},[71,3836,743],{"class":735},[71,3838,1457],{"class":77},[71,3840,3841,3843,3845,3847,3849,3851,3853,3855],{"class":73,"line":105},[71,3842,736],{"class":735},[71,3844,1464],{"class":77},[71,3846,1467],{"class":739},[71,3848,1470],{"class":77},[71,3850,1473],{"class":739},[71,3852,1476],{"class":77},[71,3854,89],{"class":735},[71,3856,1481],{"class":77},[71,3858,3859],{"class":73,"line":289},[71,3860,708],{"emptyLinePlaceholder":707},[71,3862,3863],{"class":73,"line":310},[71,3864,3865],{"class":1241},"\u002F\u002F 命令 + 回执\n",[71,3867,3868,3870,3872,3874,3876],{"class":73,"line":588},[71,3869,1495],{"class":77},[71,3871,1351],{"class":85},[71,3873,827],{"class":77},[71,3875,1356],{"class":92},[71,3877,1504],{"class":77},[71,3879,3880,3882,3884],{"class":73,"line":608},[71,3881,1495],{"class":77},[71,3883,1282],{"class":85},[71,3885,1285],{"class":77},[71,3887,3888,3890,3892,3894,3896],{"class":73,"line":614},[71,3889,1290],{"class":735},[71,3891,1293],{"class":85},[71,3893,827],{"class":77},[71,3895,1523],{"class":92},[71,3897,1526],{"class":77},[71,3899,3900,3902,3904],{"class":73,"line":620},[71,3901,1531],{"class":77},[71,3903,1534],{"class":92},[71,3905,1537],{"class":77},[71,3907,3908,3910,3912],{"class":73,"line":630},[71,3909,1542],{"class":77},[71,3911,1362],{"class":739},[71,3913,1547],{"class":77},[71,3915,3916],{"class":73,"line":653},[71,3917,1552],{"class":77},[71,3919,3920],{"class":73,"line":674},[71,3921,1232],{"class":77},[1558,3923,3924],{},[14,3925,3926,3929,3930,3932,3933,3935,3936,3938,3939,3941,3942,3944,3945,3947,3948,3950],{},[38,3927,3928],{},"仍不适用的原生语义","：组件不是原生滚动容器，因此 ",[18,3931,1568],{},"、",[18,3934,1571],{},"、\n",[18,3937,1574],{},"、CDP ",[18,3940,1578],{},"、浏览器「在页面中查找」与\n",[18,3943,1582],{}," 文本片段定位依旧不生效，请用上面的命令事件替代。\n另有一条既有通路：焦点进入内容区元素时组件会按 ",[18,3946,330],{}," 自动把它滚入视口\n（对齐 WinUI，见「方法」表的 ",[18,3949,1589],{},"）。",[23,3952,1594],{"id":1593},[983,3954,3956],{"id":3955},"属性props","属性（Props）",[988,3958,3959,3973],{},[991,3960,3961],{},[994,3962,3963,3965,3968,3971],{},[997,3964,3956],{},[997,3966,3967],{},"类型",[997,3969,3970],{},"默认",[997,3972,3451],{},[1004,3974,3975,3992,4009,4026,4046,4063,4080,4097,4114,4131,4148,4165,4182,4199,4216,4242,4262,4279,4296,4316],{},[994,3976,3977,3981,3985,3989],{},[1009,3978,3979],{},[18,3980,1624],{},[1009,3982,3983],{},[18,3984,1629],{},[1009,3986,3987],{},[18,3988,1634],{},[1009,3990,3991],{},"内容布局方向，决定内容如何受视口约束",[994,3993,3994,3998,4002,4006],{},[1009,3995,3996],{},[18,3997,1644],{},[1009,3999,4000],{},[18,4001,1649],{},[1009,4003,4004],{},[18,4005,1654],{},[1009,4007,4008],{},"是否允许用户水平滚动",[994,4010,4011,4015,4019,4023],{},[1009,4012,4013],{},[18,4014,1664],{},[1009,4016,4017],{},[18,4018,1649],{},[1009,4020,4021],{},[18,4022,1654],{},[1009,4024,4025],{},"是否允许用户垂直滚动",[994,4027,4028,4032,4036,4040],{},[1009,4029,4030],{},[18,4031,1682],{},[1009,4033,4034],{},[18,4035,1687],{},[1009,4037,4038],{},[18,4039,1692],{},[1009,4041,4042,4043,4045],{},"水平滚动条展示策略（",[18,4044,434],{}," 为 overlay，指针进入容器才显示）",[994,4047,4048,4052,4056,4060],{},[1009,4049,4050],{},[18,4051,1705],{},[1009,4053,4054],{},[18,4055,1687],{},[1009,4057,4058],{},[18,4059,1692],{},[1009,4061,4062],{},"垂直滚动条展示策略",[994,4064,4065,4069,4073,4077],{},[1009,4066,4067],{},[18,4068,1723],{},[1009,4070,4071],{},[18,4072,1728],{},[1009,4074,4075],{},[18,4076,1692],{},[1009,4078,4079],{},"水平滚动的链式传递；见下方「滚轮归属」说明",[994,4081,4082,4086,4090,4094],{},[1009,4083,4084],{},[18,4085,1742],{},[1009,4087,4088],{},[18,4089,1728],{},[1009,4091,4092],{},[18,4093,1692],{},[1009,4095,4096],{},"垂直滚动的链式传递，语义同上",[994,4098,4099,4103,4107,4111],{},[1009,4100,4101],{},[18,4102,1760],{},[1009,4104,4105],{},[18,4106,1649],{},[1009,4108,4109],{},[18,4110,1654],{},[1009,4112,4113],{},"水平触控平移导轨",[994,4115,4116,4120,4124,4128],{},[1009,4117,4118],{},[18,4119,1778],{},[1009,4121,4122],{},[18,4123,1649],{},[1009,4125,4126],{},[18,4127,1654],{},[1009,4129,4130],{},"垂直触控平移导轨",[994,4132,4133,4137,4141,4145],{},[1009,4134,4135],{},[18,4136,1796],{},[1009,4138,4139],{},[18,4140,1649],{},[1009,4142,4143],{},[18,4144,1193],{},[1009,4146,4147],{},"是否允许用户缩放",[994,4149,4150,4154,4158,4162],{},[1009,4151,4152],{},[18,4153,1814],{},[1009,4155,4156],{},[18,4157,1728],{},[1009,4159,4160],{},[18,4161,1692],{},[1009,4163,4164],{},"缩放的链式传递",[994,4166,4167,4171,4175,4179],{},[1009,4168,4169],{},[18,4170,1832],{},[1009,4172,4173],{},[18,4174,1837],{},[1009,4176,4177],{},[18,4178,1842],{},[1009,4180,4181],{},"需要忽略的输入种类，可传单个值或数组；命中则对该输入不响应",[994,4183,4184,4188,4192,4196],{},[1009,4185,4186],{},[18,4187,1852],{},[1009,4189,4190],{},[18,4191,1857],{},[1009,4193,4194],{},[18,4195,1862],{},[1009,4197,4198],{},"最小缩放系数",[994,4200,4201,4205,4209,4213],{},[1009,4202,4203],{},[18,4204,1872],{},[1009,4206,4207],{},[18,4208,1857],{},[1009,4210,4211],{},[18,4212,1881],{},[1009,4214,4215],{},"最大缩放系数",[994,4217,4218,4222,4226,4230],{},[1009,4219,4220],{},[18,4221,1891],{},[1009,4223,4224],{},[18,4225,1857],{},[1009,4227,4228],{},[18,4229,1900],{},[1009,4231,4232,4233,4235,4236,4238,4239,4241],{},"水平锚点比例（0~1），",[18,4234,1900],{}," 表示不启用水平锚定；",[18,4237,938],{}," 让内容左缘贴住视口左缘、",[18,4240,1912],{}," 让右缘贴住右缘",[994,4243,4244,4248,4252,4256],{},[1009,4245,4246],{},[18,4247,1920],{},[1009,4249,4250],{},[18,4251,1857],{},[1009,4253,4254],{},[18,4255,1900],{},[1009,4257,4258,4259,4261],{},"垂直锚点比例（0~1），",[18,4260,1900],{}," 表示不启用垂直锚定",[994,4263,4264,4268,4272,4276],{},[1009,4265,4266],{},[18,4267,1941],{},[1009,4269,4270],{},[18,4271,1946],{},[1009,4273,4274],{},[18,4275,1951],{},[1009,4277,4278],{},"内容区背景色",[994,4280,4281,4285,4289,4293],{},[1009,4282,4283],{},[18,4284,1961],{},[1009,4286,4287],{},[18,4288,1857],{},[1009,4290,4291],{},[18,4292,938],{},[1009,4294,4295],{},"键盘可聚焦（Arrow \u002F PageUp \u002F Home 等方向键滚动）",[994,4297,4298,4302,4306,4310],{},[1009,4299,4300],{},[18,4301,1979],{},[1009,4303,4304],{},[18,4305,1946],{},[1009,4307,4308],{},[18,4309,1951],{},[1009,4311,4312,4313,4315],{},"可访问名；设置后根元素带 ",[18,4314,1993],{},"，供屏幕阅读器与无障碍树型 Agent 识别该滚动区域",[994,4317,4318,4322,4326,4330],{},[1009,4319,4320],{},[18,4321,1197],{},[1009,4323,4324],{},[18,4325,2005],{},[1009,4327,4328],{},[18,4329,1362],{},[1009,4331,4332,4333,4335],{},"是否响应 ",[18,4334,980],{}," DOM 命令事件（见「Agent \u002F 自动化访问」）；只读状态反射始终保留",[983,4337,4339],{"id":4338},"事件events","事件（Events）",[988,4341,4342,4353],{},[991,4343,4344],{},[994,4345,4346,4348,4351],{},[997,4347,4339],{},[997,4349,4350],{},"载荷",[997,4352,3451],{},[1004,4354,4355,4366,4377,4390,4403,4418,4431,4446,4459],{},[994,4356,4357,4361,4363],{},[1009,4358,4359],{},[18,4360,594],{},[1009,4362,1951],{},[1009,4364,4365],{},"视口偏移或缩放发生变化（交互过程中连续触发）",[994,4367,4368,4372,4374],{},[1009,4369,4370],{},[18,4371,2052],{},[1009,4373,1951],{},[1009,4375,4376],{},"内容区尺寸发生变化",[994,4378,4379,4383,4387],{},[1009,4380,4381],{},[18,4382,842],{},[1009,4384,4385],{},[18,4386,1068],{},[1009,4388,4389],{},"交互状态变化",[994,4391,4392,4396,4400],{},[1009,4393,4394],{},[18,4395,2077],{},[1009,4397,4398],{},[18,4399,2082],{},[1009,4401,4402],{},"滚动动画即将开始，可改写目标偏移",[994,4404,4405,4409,4413],{},[1009,4406,4407],{},[18,4408,870],{},[1009,4410,4411],{},[18,4412,2096],{},[1009,4414,4415,4416,3544],{},"一次滚动结束（含 ",[18,4417,889],{},[994,4419,4420,4424,4428],{},[1009,4421,4422],{},[18,4423,2108],{},[1009,4425,4426],{},[18,4427,2113],{},[1009,4429,4430],{},"缩放动画即将开始",[994,4432,4433,4437,4441],{},[1009,4434,4435],{},[18,4436,2123],{},[1009,4438,4439],{},[18,4440,2128],{},[1009,4442,4443,4444,3544],{},"一次缩放结束（含 ",[18,4445,889],{},[994,4447,4448,4452,4456],{},[1009,4449,4450],{},[18,4451,2140],{},[1009,4453,4454],{},[18,4455,2145],{},[1009,4457,4458],{},"请求锚点（可返回自定义锚点元素）",[994,4460,4461,4465,4469],{},[1009,4462,4463],{},[18,4464,334],{},[1009,4466,4467],{},[18,4468,2159],{},[1009,4470,4471],{},"即将把元素滚入视口，可改写目标偏移",[983,4473,4475],{"id":4474},"方法methods","方法（Methods）",[14,4477,4478,4479,4481,4482,342,4484,4486],{},"通过模板 ref 调用；都返回本次操作的 ",[18,4480,889],{},"，用于与 ",[18,4483,870],{},[18,4485,2123],{}," 的载荷对应。",[988,4488,4489,4500],{},[991,4490,4491],{},[994,4492,4493,4495,4498],{},[997,4494,4475],{},[997,4496,4497],{},"签名",[997,4499,3451],{},[1004,4501,4502,4515,4528,4544,4557,4570,4583,4596,4612],{},[994,4503,4504,4508,4512],{},[1009,4505,4506],{},[18,4507,2199],{},[1009,4509,4510],{},[18,4511,2204],{},[1009,4513,4514],{},"滚动到绝对偏移",[994,4516,4517,4521,4525],{},[1009,4518,4519],{},[18,4520,942],{},[1009,4522,4523],{},[18,4524,2218],{},[1009,4526,4527],{},"按增量滚动",[994,4529,4530,4534,4538],{},[1009,4531,4532],{},[18,4533,2228],{},[1009,4535,4536],{},[18,4537,2233],{},[1009,4539,4540,4541,4543],{},"缩放到指定系数，",[18,4542,2239],{}," 为缩放中心（默认视口中心）",[994,4545,4546,4550,4554],{},[1009,4547,4548],{},[18,4549,2247],{},[1009,4551,4552],{},[18,4553,2252],{},[1009,4555,4556],{},"按增量缩放",[994,4558,4559,4563,4567],{},[1009,4560,4561],{},[18,4562,2262],{},[1009,4564,4565],{},[18,4566,2267],{},[1009,4568,4569],{},"追加滚动速度（惯性滚动）",[994,4571,4572,4576,4580],{},[1009,4573,4574],{},[18,4575,2277],{},[1009,4577,4578],{},[18,4579,2282],{},[1009,4581,4582],{},"追加缩放速度",[994,4584,4585,4589,4593],{},[1009,4586,4587],{},[18,4588,1589],{},[1009,4590,4591],{},[18,4592,2296],{},[1009,4594,4595],{},"把元素滚入视口（焦点元素自动触发）",[994,4597,4598,4602,4606],{},[1009,4599,4600],{},[18,4601,2306],{},[1009,4603,4604],{},[18,4605,2311],{},[1009,4607,4608,4609,4611],{},"注册锚点候选（也可用 ",[18,4610,2317],{}," 标记）",[994,4613,4614,4618,4622],{},[1009,4615,4616],{},[18,4617,2324],{},[1009,4619,4620],{},[18,4621,2311],{},[1009,4623,4624],{},"注销锚点候选",[14,4626,4627,342,4629,4631,4632,4634,4635,4637,4638,4640,4641,4643],{},[18,4628,2336],{},[18,4630,2339],{}," 的 ",[18,4633,1189],{}," 取 ",[18,4636,2343],{},"（默认 ",[18,4639,1692],{},"），另有 ",[18,4642,2353],{}," 占位。",[983,4645,4647],{"id":4646},"只读属性readonly","只读属性（Readonly）",[988,4649,4650,4661],{},[991,4651,4652],{},[994,4653,4654,4657,4659],{},[997,4655,4656],{},"属性（Readonly）",[997,4658,3967],{},[997,4660,3451],{},[1004,4662,4663,4676,4689,4701,4714,4727,4740,4753,4766,4779,4792],{},[994,4664,4665,4669,4673],{},[1009,4666,4667],{},[18,4668,2379],{},[1009,4670,4671],{},[18,4672,1857],{},[1009,4674,4675],{},"当前水平偏移",[994,4677,4678,4682,4686],{},[1009,4679,4680],{},[18,4681,2393],{},[1009,4683,4684],{},[18,4685,1857],{},[1009,4687,4688],{},"当前垂直偏移",[994,4690,4691,4695,4699],{},[1009,4692,4693],{},[18,4694,2407],{},[1009,4696,4697],{},[18,4698,1857],{},[1009,4700,3498],{},[994,4702,4703,4707,4711],{},[1009,4704,4705],{},[18,4706,2420],{},[1009,4708,4709],{},[18,4710,1857],{},[1009,4712,4713],{},"内容区宽度",[994,4715,4716,4720,4724],{},[1009,4717,4718],{},[18,4719,2434],{},[1009,4721,4722],{},[18,4723,1857],{},[1009,4725,4726],{},"内容区高度",[994,4728,4729,4733,4737],{},[1009,4730,4731],{},[18,4732,2448],{},[1009,4734,4735],{},[18,4736,1857],{},[1009,4738,4739],{},"视口宽度",[994,4741,4742,4746,4750],{},[1009,4743,4744],{},[18,4745,2462],{},[1009,4747,4748],{},[18,4749,1857],{},[1009,4751,4752],{},"视口高度",[994,4754,4755,4759,4763],{},[1009,4756,4757],{},[18,4758,2476],{},[1009,4760,4761],{},[18,4762,1857],{},[1009,4764,4765],{},"可滚动宽度（内容 − 视口）",[994,4767,4768,4772,4776],{},[1009,4769,4770],{},[18,4771,2490],{},[1009,4773,4774],{},[18,4775,1857],{},[1009,4777,4778],{},"可滚动高度（内容 − 视口）",[994,4780,4781,4785,4789],{},[1009,4782,4783],{},[18,4784,2504],{},[1009,4786,4787],{},[18,4788,1068],{},[1009,4790,4791],{},"当前交互状态",[994,4793,4794,4798,4802],{},[1009,4795,4796],{},[18,4797,2518],{},[1009,4799,4800],{},[18,4801,2523],{},[1009,4803,4804],{},"当前生效的锚点元素",[983,4806,4808],{"id":4807},"插槽slots","插槽（Slots）",[988,4810,4811,4819],{},[991,4812,4813],{},[994,4814,4815,4817],{},[997,4816,4808],{},[997,4818,3451],{},[1004,4820,4821],{},[994,4822,4823,4827],{},[1009,4824,4825],{},[18,4826,2550],{},[1009,4828,4829],{},"滚动内容",[1558,4831,4832],{},[14,4833,4834,4837,4838,4840,4841,342,4843,4845,4846,4848,4849,4851],{},[38,4835,4836],{},"滚轮归属","（对齐 WinUI 3）：指针位于本组件内、且该方向确实可滚动时，本次滚轮由本组件独占——即使已到滚动极限也不会滚到外层 ScrollView；",[18,4839,2564],{}," 为 ",[18,4842,434],{},[18,4844,2570],{}," 时到极限即吞掉滚轮（等价 ",[18,4847,2574],{},"），为 ",[18,4850,2578],{}," 时才把未消化的剩余增量显式交给外层。本方向没有可滚动内容、或该方向被禁用时不占有滚轮，冒泡交给外层。触控由原生触摸事件独占、笔由指针捕获独占，不走这套判定。",[2581,4853,2583],{},{"title":56,"searchDepth":99,"depth":99,"links":4855},[4856,4857,4858,4859,4860,4861,4862,4863,4864,4865,4869],{"id":2633,"depth":99,"text":2634},{"id":2693,"depth":99,"text":2693},{"id":2747,"depth":99,"text":2747},{"id":2801,"depth":99,"text":2801},{"id":2879,"depth":99,"text":2879},{"id":2906,"depth":99,"text":2906},{"id":2969,"depth":99,"text":2969},{"id":3050,"depth":99,"text":3051},{"id":3258,"depth":99,"text":3258},{"id":3384,"depth":99,"text":3385,"children":4866},[4867,4868],{"id":3439,"depth":105,"text":3439},{"id":3432,"depth":105,"text":3432},{"id":1593,"depth":99,"text":1594,"children":4870},[4871,4872,4873,4874,4875],{"id":3955,"depth":105,"text":3956},{"id":4338,"depth":105,"text":4339},{"id":4474,"depth":105,"text":4475},{"id":4646,"depth":105,"text":4647},{"id":4807,"depth":105,"text":4808},"对齐 WinUI 3 ScrollView 的容器控件：内容超出视口时滚动、平移、缩放。",{},{"title":2619},"\u002Fcomponents\u002Fscroll-view",{"title":2619,"description":4876},"components\u002Fscroll-view","615ne2IRue_w8Ik0MibK3cDA1MxbLDqR6XOiSX_C9bU",1792150929101]