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.

API Reference for the ScrollView Class

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


Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.