Scroll View

The ScrollableView component allows you to display a scrollable area in your application, which has content that is larger than its bounds. The ScrollView has an orientation property, which allows you to set different orientations to the view.

Usage

<!-- 
    The default value of the orientation property is 'vertical'. 
    The ScrollView also supports 'horizontal' as orientation value 
-->
<ScrollView orientation="vertical">
    <GridLayout rows="200 200 200 200 200 200 200 200 200 200">
        <Label class="m-10" row="0" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="1" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="2" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="3" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="4" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="5" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="6" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="7" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="8" text="Some text content follows here..." textWrap="true"/>
        <Label class="m-10" row="9" text="Some text content follows here..." textWrap="true"/>
    </GridLayout>
</ScrollView>

Improve this document

Demo Source

Tips And Tricks

Scroll Event

Using scroll event to track the scroll position via scrollX and scrollY from ScrollEventData.

<ScrollView scroll="onScroll">
    <GridLayout rows="200 200 200 200 200 200 200 200 200 200">
        <Label row="0" text="Some row content goes here..."/>
        <Label row="1" text="Some row content goes here..."/>
        <Label row="2" text="Some row content goes here..."/>
        <Label row="3" text="Some row content goes here..."/>
        <Label row="4" text="Some row content goes here..."/>
        <Label row="5" text="Some row content goes here..."/>
        <Label row="6" text="Some row content goes here..."/>
        <Label row="7" text="Some row content goes here..."/>
        <Label row="8" text="Some row content goes here..."/>
        <Label row="9" text="Some row content goes here..."/>
    </GridLayout>
</ScrollView>

function onScroll(args) {
    const scrollView = args.object;

    console.log(`scrollX: ${args.scrollX}`);
    console.log(`scrollY: ${args.scrollY}`);
}

exports.onScroll = onScroll;

import { Page } from "tns-core-modules/ui/page";
import { ScrollEventData, ScrollView } from "tns-core-modules/ui/scroll-view";

export function onScroll(args: ScrollEventData) {
    const scrollView = args.object as ScrollView;

    console.log("scrollX: " + args.scrollX);
    console.log("scrollY: " + args.scrollY);
}

Performance Tips

Using ScrollView in ScrollView, ListView in a ScrollView or ScrollView in the ListView's items can lead to a poor user interface performance and can reflect the user experience. For avoiding those issues, we should specify the height explicitly for the ListView in the scenario when the ListView is nested in ScrollView, the ScrollView's height - when the component is used inside the ListView and the child ScrollView's height in ScrollView in ScrollView scenario. Example 1 (ListView in ScrollView):

<ScrollView>
    <StackLayout>
        <ListView height="150" items="">
                <ListView.itemTemplate>
                    <!-- ....... -->
                </ListView.itemTemplate>
        </ListView>
    </StackLayout>
</ScrollView>

Example 2 (ScrollView in ListView):

<ListView items="">
    <ListView.itemTemplate>
        <StackLayout class="list-group-item">
            <ScrollView height="150" >
                <!-- ....... -->
            </ScrollView>
        </StackLayout>
    </ListView.itemTemplate>
</ListView>

Example 3 (ScrollView in ScrollView):

<ScrollView>
    <StackLayout>
        <ScrollView height="150" >
            <!-- ....... -->
        </ScrollView>
    </StackLayout>
</ScrollView>

Improve this document

Demo Source

Properties

Events

API References

Native Component