🔒 Learn how to create more secure apps at the "Best Practices for Securing Your Mobile Apps" webinar. Register today!

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";

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