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.

score 3 · Accepted Answer · answered Jul 11 '16 at 11:13

3

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

answered Jul 11 '16 at 11:13

Nick Iliev

9,610
3
35
89

hey @Nick lliev, i am getting offset in `offset` but it does not scroll. Is there possibility that we need to add timeout ? – Hardik Vaghani Jul 11 '16 at 11:21
1

Its possible you can try something like setTimeout(scrollToBottomFunc, 10) ;... also, you should probably consider removing/changing your Stack layouts (as this is a layout with no pre-defined sizes) to a Grid Layout or similar. – Nick Iliev Jul 11 '16 at 11:40
Hey @NickIliev i'm trying to auto scroll at the middle of a view, but when i'm getting the verticalOffset, the value is 0, is there a way to set a value ? I don't find anything in the documentation since the property allows to get the value but not to set it.... :-( If someone can help me about, how auto scroll at the middle of a view that would be awesome !! – Kansen Jul 21 '16 at 16:03
1

@kansen, I had the same problem. wrap it in a 1sec timeout. you will get the correct page height. here is the sample code var self = this; setTimeout(function() { var offset = self.scrollerElem.nativeElement.scrollableHeight; self.scrollerElem.nativeElement.scrollToVerticalOffset(offset, false); }, 1000); – Nabil.A Feb 13 '17 at 17:56

score 2 · Answer 2 · answered Mar 05 '18 at 21:18

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

answered Mar 05 '18 at 21:18

renatodamas

16,555
8
30
51

Auto scroll to Bottom

2 Answers2

Linked