🤖 Create an engaging chatbot from scratch and add it to your NativeScript app! Learn more at our webinar on March 28th.

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:

The possible values of orientation are:

  • horizontal
  • vertical

It is possible to handle the scroll event of the View by binding to the ScrollView’s scroll event.

const searchBarModule = require("tns-core-modules/ui/search-bar");
import { ScrollEventData, ScrollView } from "tns-core-modules/ui/scroll-view";
const listViewModule = require("tns-core-modules/ui/list-view");
import { ItemEventData, ListView } from "tns-core-modules/ui/list-view";

Note: 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>

Events

Scroll events

<StackLayout borderRadius="2" backgroundColor="#0099CC" class="m-b-5" height="50">
    <Label text="{{ status }}" class="h2 text-center" color="white"></Label>
</StackLayout>
<ScrollView scroll="onScroll">
    <GridLayout class="m-15" rows="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto">
        <Label class="h3 m-5" height="50" row="0" text="Title 1"/>
        <Label class="h3 m-5" height="50" row="1" text="Title 2"/>
        <Label class="h3 m-5" height="50" row="2" text="Title 3"/>
        <Label class="h3 m-5" height="50" row="3" text="Title 4"/>
        <Label class="h3 m-5" height="50" row="4" text="Title 5"/>
        <Label class="h3 m-5" height="50" row="5" text="Title 6"/>
        <Label class="h3 m-5" height="50" row="6" text="Title 7"/>
        <Label class="h3 m-5" height="50" row="7" text="Title 8"/>
        <Label class="h3 m-5" height="50" row="8" text="Title 9"/>
        <Label class="h3 m-5" height="50" row="9" text="Title 10"/>
        <Label class="h3 m-5" height="50" row="10" text="Title 10"/>
        <Label class="h3 m-5" height="50" row="11" text="Title 11"/>
        <Label class="h3 m-5" height="50" row="12" text="Title 12"/>
        <Label class="h3 m-5" height="50" row="13" text="Title 13"/>
        <Label class="h3 m-5" height="50" row="14" text="Title 14"/>
        <Label class="h3 m-5" height="50" row="15" text="Title 15"/>
    </GridLayout>
</ScrollView>
function onNavigatingTo(args) {
    const page = args.object;
    const vm = new observableModule.Observable();

    vm.set("status", "not scrolling");

    page.bindingContext = vm;
}
function onScroll(args) {
    const page = args.object.page;
    const vm = page.bindingContext;
    vm.set("status", "scrolling");
    setTimeout(() => {
        vm.set("status", "not scrolling");
    }, 300);

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

exports.onNavigatingTo = onNavigatingTo;
exports.onScroll = onScroll;
export function onNavigatingTo(args) {
    const page: Page = <Page>args.object;
    const vm = new Observable();

    vm.set("status", "not scrolling");

    page.bindingContext = vm;
}
export function onScroll(args: ScrollEventData) {
    const scrollview: ScrollView = <ScrollView>args.object;
    const page: Page = <Page>scrollview.page;
    const vm = page.bindingContext;
    vm.set("status", "scrolling");
    setTimeout(() => {
        vm.set("status", "not scrolling");
    }, 300);

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

Improve this document

Demo Source


Horizontal

Set ScrollView with horizontal orientation.

<ScrollView orientation="horizontal">
    <GridLayout class="m-15" columns="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto">
        <Label width="50" height="50" class="h3 m-15" col="0" textWrap="true" text="Title 1"/>
        <Label width="50" height="50" class="h3 m-15" col="1" textWrap="true" text="Title 2"/>
        <Label width="50" height="50" class="h3 m-15" col="2" textWrap="true" text="Title 3"/>
        <Label width="50" height="50" class="h3 m-15" col="3" textWrap="true" text="Title 4"/>
        <Label width="50" height="50" class="h3 m-15" col="4" textWrap="true" text="Title 5"/>
        <Label width="50" height="50" class="h3 m-15" col="5" textWrap="true" text="Title 6"/>
        <Label width="50" height="50" class="h3 m-15" col="6" textWrap="true" text="Title 7"/>
        <Label width="50" height="50" class="h3 m-15" col="7" textWrap="true" text="Title 8"/>
        <Label width="50" height="50" class="h3 m-15" col="8" textWrap="true" text="Title 9"/>
        <Label width="50" height="50" class="h3 m-15" col="9" textWrap="true" text="Title 10"/>
        <Label width="50" height="50" class="h3 m-15" col="10" textWrap="true" text="Title 10"/>
        <Label width="50" height="50" class="h3 m-15" col="11" textWrap="true" text="Title 11"/>
        <Label width="50" height="50" class="h3 m-15" col="12" textWrap="true" text="Title 12"/>
        <Label width="50" height="50" class="h3 m-15" col="13" textWrap="true" text="Title 13"/>
        <Label width="50" height="50" class="h3 m-15" col="14" textWrap="true" text="Title 14"/>
        <Label width="50" height="50" class="h3 m-15" col="15" textWrap="true" text="Title 15"/>
    </GridLayout>
</ScrollView>

Improve this document

Demo Source


Is Scroll Enabled

The isScrollEnabled property allows you to enable/disable the scroll view of the ScrollView component. The example shows how to bind the property and how to toggle its value.

<GridLayout rows="100 *">
    <Button text="{{scrollEnabled ? 'Disable scroll' : 'Enable scroll'}}" tap="onTap" class="btn btn-primary btn-active"/>
    <ScrollView isScrollEnabled="{{ scrollEnabled }}"  row="1">
        <GridLayout class="m-15" rows="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto">
                <Label class="h3 m-5" height="50" row="0" text="Title 1"/>
                <Label class="h3 m-5" height="50" row="1" text="Title 2"/>
                <Label class="h3 m-5" height="50" row="2" text="Title 3"/>
                <Label class="h3 m-5" height="50" row="3" text="Title 4"/>
                <Label class="h3 m-5" height="50" row="4" text="Title 5"/>
                <Label class="h3 m-5" height="50" row="5" text="Title 6"/>
                <Label class="h3 m-5" height="50" row="6" text="Title 7"/>
                <Label class="h3 m-5" height="50" row="7" text="Title 8"/>
                <Label class="h3 m-5" height="50" row="8" text="Title 9"/>
                <Label class="h3 m-5" height="50" row="9" text="Title 10"/>
                <Label class="h3 m-5" height="50" row="10" text="Title 10"/>
                <Label class="h3 m-5" height="50" row="11" text="Title 11"/>
                <Label class="h3 m-5" height="50" row="12" text="Title 12"/>
                <Label class="h3 m-5" height="50" row="13" text="Title 13"/>
                <Label class="h3 m-5" height="50" row="14" text="Title 14"/>
                <Label class="h3 m-5" height="50" row="15" text="Title 15"/>
        </GridLayout>
    </ScrollView>
</GridLayout>
const observableModule = require("tns-core-modules/data/observable");

function onPageLoaded(args) {
    const page = args.object;
    page.bindingContext = observableModule.fromObject({ scrollEnabled: true });
}

function onTap(args) {
    const page = args.object.page;
    const viewModel = page.bindingContext;
    viewModel.scrollEnabled = !viewModel.scrollEnabled;

}

exports.onPageLoaded = onPageLoaded;
exports.onTap = onTap;
import { EventData, fromObject } from "tns-core-modules/data/observable";
import { Page } from "tns-core-modules/ui/page";
import { Button } from "tns-core-modules/ui/button";

export function onPageLoaded(args) {
    let page = <Page>args.object;

    page.bindingContext = fromObject({scrollEnabled: true});
}
export function onTap(args: EventData) {
    let page: Page  = (<Button>args.object).page;
    let viewModel = page.bindingContext;
    viewModel.scrollEnabled = !viewModel.scrollEnabled;

}

Improve this document

Demo Source


Vertical

Set ScrollView with vertical orientation.

<ScrollView>
        <GridLayout class="m-15" rows="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto">
                <Label class="h3 m-5" height="50" row="0" text="Title 1"/>
                <Label class="h3 m-5" height="50" row="1" text="Title 2"/>
                <Label class="h3 m-5" height="50" row="2" text="Title 3"/>
                <Label class="h3 m-5" height="50" row="3" text="Title 4"/>
                <Label class="h3 m-5" height="50" row="4" text="Title 5"/>
                <Label class="h3 m-5" height="50" row="5" text="Title 6"/>
                <Label class="h3 m-5" height="50" row="6" text="Title 7"/>
                <Label class="h3 m-5" height="50" row="7" text="Title 8"/>
                <Label class="h3 m-5" height="50" row="8" text="Title 9"/>
                <Label class="h3 m-5" height="50" row="9" text="Title 10"/>
                <Label class="h3 m-5" height="50" row="10" text="Title 10"/>
                <Label class="h3 m-5" height="50" row="11" text="Title 11"/>
                <Label class="h3 m-5" height="50" row="12" text="Title 12"/>
                <Label class="h3 m-5" height="50" row="13" text="Title 13"/>
                <Label class="h3 m-5" height="50" row="14" text="Title 14"/>
                <Label class="h3 m-5" height="50" row="15" text="Title 15"/>
        </GridLayout>
</ScrollView>

Improve this document

Demo Source


API Reference for the ScrollView Class