MuHua-UIElements/Assets/UI Toolkit/GamePage/ScrollViewTestPage/ScrollViewTestPage.uxml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:Template name="Dropdown" src="project://database/Assets/UI%20Toolkit/Component/Dropdown/Dropdown.uxml?fileID=9197481963319205126&amp;guid=58251f1c92414424eb285cc650757918&amp;type=3#Dropdown" />
    <Style src="project://database/Assets/UI%20Toolkit/GamePage/ScrollViewTestPage/ScrollViewTestPage.uss?fileID=7433441132597879392&amp;guid=311709c1ee5eed1419c4f52e0c050618&amp;type=3#ScrollViewTestPage" />
    <ui:VisualElement name="TestPage" style="flex-grow: 1; flex-direction: row;">
        <ui:VisualElement name="ScrollView1" class="scrollview" style="width: 350px; height: 450px; flex-grow: 0;">
            <ui:VisualElement name="Viewport" class="scrollview-viewport" style="margin-right: 30px; margin-bottom: 0; flex-direction: column;">
                <ui:VisualElement name="Container" class="scrollview-container" style="width: 100%; height: auto;">
                    <ui:Label tabindex="-1" text="Label" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Instance template="Dropdown" name="Dropdown" style="width: 200px;" />
                    <ui:Toggle label="Toggle" />
                    <ui:Toggle label="Toggle" />
                    <ui:DropdownField label="Dropdown" />
                    <ui:TextField picking-mode="Ignore" label="Text Field" value="filler text" />
                    <ui:FloatField label="Float Field" value="42.2" />
                    <ui:FloatField label="Float Field" value="42.2" />
                    <ui:FloatField label="Float Field" value="42.2" />
                    <ui:FloatField label="Float Field" value="42.2" />
                    <ui:FloatField label="Float Field" value="42.2" />
                    <ui:FloatField label="Float Field" value="42.2" />
                </ui:VisualElement>
            </ui:VisualElement>
            <ui:VisualElement name="ScrollerHorizontal" class="scroller-horizontal scrollview-horizontal-scroller" style="right: 0; display: none;">
                <ui:VisualElement name="Dragger" class="scroller-horizontal-dragger scrollview-horizontal-scroller-dragger" />
            </ui:VisualElement>
            <ui:VisualElement name="ScrollerVertical" class="scroller-vertical scrollview-vertical-scroller">
                <ui:VisualElement name="Dragger" class="scroller-vertical-dragger scrollview-vertical-scroller-dragger" />
            </ui:VisualElement>
        </ui:VisualElement>
        <ui:VisualElement name="ScrollView2" class="scrollview" style="width: 350px; height: 450px; flex-grow: 0;">
            <ui:VisualElement name="Viewport" class="scrollview-viewport" style="margin-right: 30px; margin-bottom: 0; flex-direction: column;">
                <ui:VisualElement name="Container" class="scrollview-container" style="width: 100%; height: auto;">
                    <ui:Label tabindex="-1" text="Label" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Toggle label="Toggle" />
                    <ui:Toggle label="Toggle" />
                    <ui:Instance template="Dropdown" name="Dropdown" style="width: 200px;" />
                    <ui:DropdownField label="Dropdown" />
                    <ui:TextField picking-mode="Ignore" label="Text Field" value="filler text" />
                    <ui:FloatField label="Float Field" value="42.2" />
                    <ui:FloatField label="Float Field" value="42.2" />
                    <ui:FloatField label="Float Field" value="42.2" />
                    <ui:FloatField label="Float Field" value="42.2" />
                    <ui:FloatField label="Float Field" value="42.2" />
                    <ui:FloatField label="Float Field" value="42.2" />
                </ui:VisualElement>
            </ui:VisualElement>
            <ui:VisualElement name="ScrollerHorizontal" class="scroller-horizontal scrollview-horizontal-scroller" style="right: 0; display: none;">
                <ui:VisualElement name="Dragger" class="scroller-horizontal-dragger scrollview-horizontal-scroller-dragger" />
            </ui:VisualElement>
            <ui:VisualElement name="ScrollerVertical" class="scroller-vertical scrollview-vertical-scroller">
                <ui:VisualElement name="Dragger" class="scroller-vertical-dragger scrollview-vertical-scroller-dragger" />
            </ui:VisualElement>
        </ui:VisualElement>
        <ui:VisualElement name="ScrollView3" class="scrollview" style="flex-grow: 0; width: 350px; height: 450px;">
            <ui:VisualElement name="Viewport" class="scrollview-viewport" style="margin-right: 0;">
                <ui:VisualElement name="Container" class="scrollview-container" style="height: 100%; width: auto; flex-direction: row;">
                    <ui:Button text="1" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="2" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="3" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="4" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="5" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="6" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="7" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="8" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="9" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="10" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                </ui:VisualElement>
            </ui:VisualElement>
            <ui:VisualElement name="ScrollerHorizontal" class="scroller-horizontal scrollview-horizontal-scroller" style="right: 0;">
                <ui:VisualElement name="Dragger" class="scroller-horizontal-dragger scrollview-horizontal-scroller-dragger" />
            </ui:VisualElement>
            <ui:VisualElement name="ScrollerVertical" class="scroller-vertical scrollview-vertical-scroller" style="display: none;">
                <ui:VisualElement name="Dragger" class="scroller-vertical-dragger scrollview-vertical-scroller-dragger" />
            </ui:VisualElement>
        </ui:VisualElement>
        <ui:VisualElement name="ScrollView4" class="scrollview" style="flex-grow: 0; width: 350px; height: 450px;">
            <ui:VisualElement name="Viewport" class="scrollview-viewport" style="margin-right: 0;">
                <ui:VisualElement name="Container" class="scrollview-container" style="height: 100%; width: auto; flex-direction: row;">
                    <ui:Button text="1" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="2" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="3" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="4" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="5" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="6" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="7" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="8" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="9" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="10" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                </ui:VisualElement>
            </ui:VisualElement>
            <ui:VisualElement name="ScrollerHorizontal" class="scroller-horizontal scrollview-horizontal-scroller" style="right: 0;">
                <ui:VisualElement name="Dragger" class="scroller-horizontal-dragger scrollview-horizontal-scroller-dragger" />
            </ui:VisualElement>
            <ui:VisualElement name="ScrollerVertical" class="scroller-vertical scrollview-vertical-scroller" style="display: none;">
                <ui:VisualElement name="Dragger" class="scroller-vertical-dragger scrollview-vertical-scroller-dragger" />
            </ui:VisualElement>
        </ui:VisualElement>
        <ui:VisualElement name="ScrollView5" class="scrollview" style="width: 350px; height: 450px; flex-grow: 0;">
            <ui:VisualElement name="Viewport" class="scrollview-viewport">
                <ui:VisualElement name="Container" class="scrollview-container" style="width: 1000px; height: 1000px;">
                    <ui:Button text="1" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="2" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="3" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="4" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="5" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="6" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="7" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="8" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="9" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="10" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                    <ui:Button text="Button" parse-escape-sequences="true" display-tooltip-when-elided="true" />
                </ui:VisualElement>
            </ui:VisualElement>
            <ui:VisualElement name="ScrollerHorizontal" class="scrollview-horizontal-scroller">
                <ui:VisualElement name="Dragger" class="scrollview-horizontal-scroller-dragger" />
            </ui:VisualElement>
            <ui:VisualElement name="ScrollerVertical" class="scrollview-vertical-scroller">
                <ui:VisualElement name="Dragger" class="scrollview-vertical-scroller-dragger" />
            </ui:VisualElement>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>