🎟️ Grab your ticket for NativeScript Developer Day! Coming in April to Amsterdam. Learn more here.

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.

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