NativeScript Core

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

Name Type Description
orientation Orientation Gets or sets direction in which the content can be scrolled. Supported values are "vertical" (default) and "horizontal".

Events

Name Description
scroll Emitted when the component is scrolled.

API References

Name Type
tns-core-modules/ui/scroll-view Module
ScrollView Class
orientation Property
ScrollEventData Interface

Native Component

Android iOS
NativeScript specific implementation NativeScript specific implementation