Have you seen all of the free code samples available on our Marketplace?

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


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 "timer";
import { ScrollEventData } from "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