How to scroll to bottom in code on a View or ListView in Kendo UI Mobile?

[Christoph]

I have the need that I trigger a scroll to bottom once a new line gets added to the listview. This should be triggered by code but so far I have not found a good solution.

So far my solution is:
scrollViewToBottom: function (view) {
            var scroller = view.scroller;
            console.log("scrollheight " + scroller.scrollHeight() + " height: " + scroller.height());
            var offset = scroller.height();
            if (offset == 0)
                offset = 100;
            scroller.scrollTo(0, scroller.scrollHeight() * -1 + offset);
        },

but this does not work in most scenarious because scroller.scrollHeight and scroller.height don't seem to be initialized.

Is there any better solution to this?

Christoph

[Petyo]

Hi Christoph,

the code you have posted should work in general. I tested it in this jsbin sample, and it scrolls as expected. Am I missing something?

Regards,
Petyo
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[RES]

I have a similar situation where I have a chat like application and need to scroll to the bottom and was wondering how the scroller.height() would ever be 0 and why you would set the offset to 100 if it's 0?  I ended up using something like the following to scroll to the bottom.

function scrollToBottom() {
    // topOffset set when the view loads like the following
    // var topOffset = scroller.find(".km-scroll-container").position().top

    var usingNativeScrolling = app.view().element.data("use-native-scrolling");
    var scroller = app.view().scroller;

    if (usingNativeScrolling) {
        $("#myReplyBoxAtTheBottom")[0].scrollIntoView();
    } else {
        var scrollerHeight = scroller.scrollHeight();
        var viewportHeight = scroller.height();

        if ((scrollerHeight + topOffset) > viewportHeight) {
            var position = -1 * (scrollerHeight - viewportHeight - topOffset);
            scroller.animatedScrollTo(0, position);
        }
    }
}

So in my case in iOS and Android scrolling doesn't work correctly when the on screen keyboard is dismissed so I had to enable native scrolling and this breaks scroller.height() method so I had to find another way and in this case the scrollIntoView method seems to work in native mode but not in non-native mode.  I'm wondering why this is the case because I would prefer to eliminate all the extra calculation.

It would be really nice if Telerik would just add a scrollToBottom method to the scroller.

[Kiril Nikolov]

Hi Christoph,

The functionality that you are looking for is not supported. However I would like to encourage you to visit our UserVoice section, where you can share your suggestion and if it gets popular we will see it implemented in a future release.

Regards,
Kiril Nikolov
Telerik