Scroll to the bottom of the view of ScrollView programmatically in Nativescript

Question

I am developing an app where when user click on cardview layout, detail of that view is opened on that card view layout. I have used nativescript ScrollView for scrolling the views. But, when user click on last cardview layout it should scroll to show detail of cardview layout. It does not automatically scrolls to the last card view detail, due to this the detail of the card view is hidden and user have to scroll manually.

I found this Nativescript scroll to bottom of ScrollView programmatically but i am not able to solve my problem. Below is my code for layout.

   <ScrollView id="scrollView" #scrollView orientation="vertical" #scrollView     (scroll)="onScroll($event)">

          <StackLayout row="0" col="0">
            <StackLayout *ngFor="let item of items" class="card-view" id="cardViewLayout">

              <GridLayout columns="auto, *, auto" rows="auto,auto,auto" (tap)="toggleDetail(@event)">

              </GridLayout>

              <GridLayout row="3" col="0" colSpan="3" columns=" *, *" rows="auto,auto" id="detailedData" visibility="hidden" class="cardDetail">

                <StackLayout row="0" col="0" class="detailDataStack">
                </StackLayout>

              </GridLayout>

        </StackLayout>
      </StackLayout>
    </ScrollView>


 toggleDetail(args){
    var scrollView = this.page.getViewById("scrollView")
    var offset = this.scrollView.nativeElement.scrollableHeight;
    this.scrollView.nativeElement.scrollToVerticalOffset( this.scrollView.nativeElement.offset+ 120, false);   
 }

As shown in above when user click on card-view class layout, it is toggling cardDetail class. When there is last item in card-view it should scroll automatically to show the details but it don't automatically scrolls.

In toggleDetail() method i tried to get scrollableHeight, add 120 to that height and make it scroll when user in last item but nothing happened.

Playground Sample app for this ScrollView Sample app Nativescript Playground

Thank you in advance :)

Answer 1

您应该使用verticalOffset而不仅仅是offset 。

this.scrollView.nativeElement.scrollToVerticalOffset(this.scrollView.nativeElement.verticalOffset + 120, false); 

Answer 2

just use scrollToVerticalOffset and scrollableHeight

const scrollView = page.getViewById('scroll-view');
scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);