Auto scroll to Bottom

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.

Answers:

Answer

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.