Nativescript scroll to bottom of ScrollView programmatically

Question

In my Nativescript Angular application, I have a TextView within a ScrollView, defined as such:

<ScrollView orientation="vertical" height="70%" width="100%" style="margin-bottom: 1%; background-color:white" (loaded)="onScrollerLoaded($event)">
    <TextView 
        id="terminal" [text]="terminalText" editable="false"
        style="color: whitesmoke; background-color: black; font-size: 8%; font-family: monospace" height="100%"     
        (tap)="onTap($event)" (loaded)="onTerminalLoaded($event)">
    </TextView>
</ScrollView>

The purpose of this element is to act as a terminal, and is rapidly printing incoming messages from a bluetooth device.

Currently, the ScrollView is scrolling back to the top whenever I add some text to the terminalText variable, to which the TextView is bound. I would like to be able to keep the ScrollView at the bottom of the TextView.

A few notes:

I am adding text to the terminalText variable within my associated component class through this method:

public appendToTerminal(appendStr){
    this.terminalText += appendStr;
}

I have tried implementing the following code that would execute once the ScrollView loads:

private scrollIntervalId;
onScrollerLoaded(data: EventData){
    if(!this.scrollIntervalId){
        this.scrollIntervalId = setInterval(()=>{
            this.ngZone.run(() =>
                (data.object as any).scrollToVerticalOffset((data.object as any).scrollableHeight, false)
            )
        }, 10);
    }
}

(This attempt is based on an explanation given here

I have only tried this on an Android device, as I do not have access to an Apple device.

on scrollview load it is working or not?

bhavin jalodara
– bhavin jalodara

2018-07-05 07:38:44 +00:00
Commented Jul 5, 2018 at 7:38 — bhavin jalodara
– bhavin jalodara, Commented Jul 5, 2018 at 7:38
@bhavinjalodara It's working

Instakat
– Instakat

2018-07-05 19:41:55 +00:00
Commented Jul 5, 2018 at 19:41 — Instakat
– Instakat, Commented Jul 5, 2018 at 19:41

bhavin jalodara · Accepted Answer · 2018-07-07 05:32:35Z

10

you are setting TextView to fixed height 100% which is will be same as ScrollView that is why scrollableHeight will always be 0. you should use minHeight="100%".

then you can scroll programmatically to the end when you are appending text to terminal text this.terminalText += appendStr.

like this

public appendToTerminal(appendStr){
    this.terminalText += appendStr;
    setTimeout(()=>{
        scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, false);

    },150);
}

this will append the text then get the scrollableHeight and then will scroll to it.

here is working playground demo:https://play.nativescript.org/?template=play-ng&id=Rs0xnP&v=16

edited Jul 7, 2018 at 5:32

answered Jul 6, 2018 at 5:08

bhavin jalodara

1,53012 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Instakat Over a year ago

Tried your method, still doesn't work. I may have found the reason why - I logged the values of scrollView and it's scrollableHeight and while scrollView is good, scrollableHeight is set to 0 at all times, even when I can manually scroll down the page. Any comment on this? I tried embedding the TextView in a StackLayout, but no luck there either.

bhavin jalodara Over a year ago

can you create the playground demo. then i can have a look.

Instakat Over a year ago

Playground Link: play.nativescript.org/?template=play-ng&id=Rs0xnP

Gkiokan Over a year ago

In case anyone get still 0 as scrollableHeight. I am not sure why, but without setTimeout it is not working. Handling the scrollable things in a setTimeout cb function solves the issue.

bhavin jalodara Over a year ago

you can also try running this in NgZone.

|

bgrand-ch · Accepted Answer · 2019-03-20 15:13:35Z

The function below can only be used in the Angular ngDoCheck() or ngAfterContentChecked() lifecycle:

// See https://angular.io/guide/lifecycle-hooks
function goDownScrollView(scrollView: object, animate: boolean = true): boolean {

    let neScrollView:     ScrollView = <ScrollView>getNativeElement(scrollView),
        scrollableHeight: number     = neScrollView.scrollableHeight;

    console.log("neScrollView:", neScrollView);
    console.log("neScrollView scrollableHeight:", scrollableHeight);

    if (scrollableHeight > 0) {

        neScrollView.scrollToVerticalOffset(scrollableHeight, animate);
        return true;

    } else {

        return false;

    }

}

An helper to always get the native element:

function getNativeElement(object: object): object {

    return (object.hasOwnProperty("nativeElement")) ? object['nativeElement'] : object;

}

The scrollable height may be zero at the first pass of the lifecycle (for example, if you add elements to your ScrollView with an HTTP request). That's why you have to test the current content with new before scroll:

// See https://angular.io/api/core/ViewChild
@ViewChild("content") private _pageContent: ElementRef<ScrollView>;

public  currentContent:   object;
private _previousContent: object;

...

ngAfterContentChecked(): void {

    if (this.currentContent != this._previousContent) {

        let isScrollDown: boolean = goDownScrollView(this._pageContent);

        if (isScrollDown) {

            this._previousContent = this.currentContent;

        }

    }

}

Collectives™ on Stack Overflow

Nativescript scroll to bottom of ScrollView programmatically

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related