Auto scroll to Bottom

Question

I am working on application with chat screen. But as normal screen it starts scrolling from top to bottom. But its should be from bottom to top. The application is in Telerik Nativescript platform.

View.xml

<ScrollView row="0" col="0">  
    <StackLayout class="history-content-area">
        <Repeater items="{{messageHistory}}">
            <Repeater.itemTemplate>
                <StackLayout>
                    <!-- ITEMS GO HERE -->
                </StackLayout>
            </Repeater.itemTemplate>
        </Repeater>
    </StackLayout>
</ScrollView>

I need help in above code how can i scroll to bottom automatically on page load ? Let me know if you need javascript code.

Thanks in advance.

Answer 1

On your ScrollView you can use scrollToVerticalOffset where you can pass the offset to scroll to.

For example: view.xml

<ScrollView row="0" col="0" id="myScroller">  
    <StackLayout class="history-content-area">
        <Repeater items="{{messageHistory}}">
            <Repeater.itemTemplate>
                <StackLayout>
                    <!-- ITEMS GO HERE -->
                </StackLayout>
            </Repeater.itemTemplate>
        </Repeater>
    </StackLayout>
</ScrollView>

view.js

mScroller = page.getViewById("myScroller");

var offset = mScroller.scrollableHeight; // get the current scroll height
mScroller.scrollToVerticalOffset(offset, false); // scroll to the bottom

Answer 2

Let's say your ScrollView has its id to 'id-scroller'. Then in your View.js you do:

let scroller = page.getViewById('id-scroller');

setTimeout(function() {
  scroller.scrollToVerticalOffset(scroller.scrollableHeight, true);
}, 1);