Auto scroll to bottom

Question

I am working on a chat application. But like a regular screen, it starts to scroll from top to bottom. But it should be from the bottom up. The application is located on the 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 with the code above, how can I automatically scroll down a page when a page loads? Let me know if you need javascript code.

Thanks in advance.

Answer 1

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

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

, ScrollView 'id-scroller'. View.js :

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

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