NativeScript Angular

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.

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]="countries">
            <ng-template let-country="item" let-i="index" let-odd="odd" let-even="even">
                <!-- ....... -->
            </ng-template>
        </ListView>
    </StackLayout>
</ScrollView>

Example 2 (ScrollView in ListView):

<ListView [items]="countries">
    <ng-template let-country="item" let-i="index" let-odd="odd" let-even="even">
        <StackLayout>
            <ScrollView height="150" >
                <!-- ....... -->
            </ScrollView>
        </StackLayout>
    </ng-template>
</ListView>

Example 3 (ScrollView in ScrollView):

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

Image

Horizontal

Set ScrollView with horizontal orientation.

<ScrollView orientation="horizontal" sdkExampleTitle sdkToggleNavButton>
    <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" text="Title 1"></Label>
        <Label width="50" height="50" class="h3 m-15" col="1" text="Title 2"></Label>
        <Label width="50" height="50" class="h3 m-15" col="2" text="Title 3"></Label>
        <Label width="50" height="50" class="h3 m-15" col="3" text="Title 4"></Label>
        <Label width="50" height="50" class="h3 m-15" col="4" text="Title 5"></Label>
        <Label width="50" height="50" class="h3 m-15" col="5" text="Title 6"></Label>
        <Label width="50" height="50" class="h3 m-15" col="6" text="Title 7"></Label>
        <Label width="50" height="50" class="h3 m-15" col="7" text="Title 8"></Label>
        <Label width="50" height="50" class="h3 m-15" col="8" text="Title 9"></Label>
        <Label width="50" height="50" class="h3 m-15" col="9" text="Title 10"></Label>
        <Label width="50" height="50" class="h3 m-15" col="10" text="Title 10"></Label>
        <Label width="50" height="50" class="h3 m-15" col="11" text="Title 11"></Label>
        <Label width="50" height="50" class="h3 m-15" col="12" text="Title 12"></Label>
        <Label width="50" height="50" class="h3 m-15" col="13" text="Title 13"></Label>
        <Label width="50" height="50" class="h3 m-15" col="14" text="Title 14"></Label>
        <Label width="50" height="50" class="h3 m-15" col="15" text="Title 15"></Label>
    </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 sdkExampleTitle sdkToggleNavButton rows="100 *">
    <Button text="{{scrollEnabled ? 'Disable scroll' : 'Enable scroll'}}" (tap)="onTap()" class="btn btn-primary btn-active"></Button>
    <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>
            <Label class="h3 m-5" height="50" row="1" text="Title 2"></Label>
            <Label class="h3 m-5" height="50" row="2" text="Title 3"></Label>
            <Label class="h3 m-5" height="50" row="3" text="Title 4"></Label>
            <Label class="h3 m-5" height="50" row="4" text="Title 5"></Label>
            <Label class="h3 m-5" height="50" row="5" text="Title 6"></Label>
            <Label class="h3 m-5" height="50" row="6" text="Title 7"></Label>
            <Label class="h3 m-5" height="50" row="7" text="Title 8"></Label>
            <Label class="h3 m-5" height="50" row="8" text="Title 9"></Label>
            <Label class="h3 m-5" height="50" row="9" text="Title 10"></Label>
            <Label class="h3 m-5" height="50" row="10" text="Title 10"></Label>
            <Label class="h3 m-5" height="50" row="11" text="Title 11"></Label>
            <Label class="h3 m-5" height="50" row="12" text="Title 12"></Label>
            <Label class="h3 m-5" height="50" row="13" text="Title 13"></Label>
            <Label class="h3 m-5" height="50" row="14" text="Title 14"></Label>
            <Label class="h3 m-5" height="50" row="15" text="Title 15"></Label>
        </GridLayout>
    </ScrollView>
</GridLayout>
scrollEnabled: boolean = true;

onTap() {
    this.scrollEnabled = !this.scrollEnabled;
}

Improve this document

Demo Source


Scroll Event

Scroll events

CSS

<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($event)">
    <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>
        <Label class="h3 m-5" height="50" row="1" text="Title 2"></Label>
        <Label class="h3 m-5" height="50" row="2" text="Title 3"></Label>
        <Label class="h3 m-5" height="50" row="3" text="Title 4"></Label>
        <Label class="h3 m-5" height="50" row="4" text="Title 5"></Label>
        <Label class="h3 m-5" height="50" row="5" text="Title 6"></Label>
        <Label class="h3 m-5" height="50" row="6" text="Title 7"></Label>
        <Label class="h3 m-5" height="50" row="7" text="Title 8"></Label>
        <Label class="h3 m-5" height="50" row="8" text="Title 9"></Label>
        <Label class="h3 m-5" height="50" row="9" text="Title 10"></Label>
        <Label class="h3 m-5" height="50" row="10" text="Title 10"></Label>
        <Label class="h3 m-5" height="50" row="11" text="Title 11"></Label>
        <Label class="h3 m-5" height="50" row="12" text="Title 12"></Label>
        <Label class="h3 m-5" height="50" row="13" text="Title 13"></Label>
        <Label class="h3 m-5" height="50" row="14" text="Title 14"></Label>
        <Label class="h3 m-5" height="50" row="15" text="Title 15"></Label>
    </GridLayout>
</ScrollView>

TypeScript

import { Component } from "@angular/core";
import { setTimeout } from "tns-core-modules/timer";
import { ScrollEventData } from "tns-core-modules/ui/scroll-view";

@Component({
    moduleId: module.id,
    templateUrl: "./scroll-event.component.html"
})
export class ScrollEventComponent {

    public status = "not scrolling";

    public onScroll(args: ScrollEventData) {
        this.status = "scrolling";

        setTimeout(() => {
            this.status = "not scrolling";
        }, 300);

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

Improve this document

Demo Source


Vertical

Set ScrollView with vertical orientation.

<ScrollView sdkExampleTitle sdkToggleNavButton>
    <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>
        <Label class="h3 m-5" height="50" row="1" text="Title 2"></Label>
        <Label class="h3 m-5" height="50" row="2" text="Title 3"></Label>
        <Label class="h3 m-5" height="50" row="3" text="Title 4"></Label>
        <Label class="h3 m-5" height="50" row="4" text="Title 5"></Label>
        <Label class="h3 m-5" height="50" row="5" text="Title 6"></Label>
        <Label class="h3 m-5" height="50" row="6" text="Title 7"></Label>
        <Label class="h3 m-5" height="50" row="7" text="Title 8"></Label>
        <Label class="h3 m-5" height="50" row="8" text="Title 9"></Label>
        <Label class="h3 m-5" height="50" row="9" text="Title 10"></Label>
        <Label class="h3 m-5" height="50" row="10" text="Title 10"></Label>
        <Label class="h3 m-5" height="50" row="11" text="Title 11"></Label>
        <Label class="h3 m-5" height="50" row="12" text="Title 12"></Label>
        <Label class="h3 m-5" height="50" row="13" text="Title 13"></Label>
        <Label class="h3 m-5" height="50" row="14" text="Title 14"></Label>
        <Label class="h3 m-5" height="50" row="15" text="Title 15"></Label>
    </GridLayout>
</ScrollView>

Improve this document

Demo Source


API Reference for the ScrollView Class