Scrolling Kendo mobile views with code in 2 steps

The easiest x-steps guide to scroll a Kendo mobile view with HTML and JS code. Most useful when auto scrolling to a certain HTML element is needed.

Scrolling Kendo mobile views with code in 2 steps

This topic will be discussed with the following structure.

First, you need to create a Kendo mobile view with a wrapper Kendo scroller. To define a Kendo scroller, all you need to do is create a <div> element with a data-role="scroller" tag. The view content must be placed in the defined scroller, you can place whatever controls or HTML content you like in that scroller. The purpose of this scroller will be explained later.

<p><div data-role="view" data-title="View Title" id="mobile-view"> </p><p style="margin-left: 20px;"><div id="container-scroller" data-role="scroller"> </p><p style="margin-left: 60px;"><!--place your lists or content here-->
</p><p style="margin-left: 60px;">. </p><p style="margin-left: 60px;">. </p><p style="margin-left: 60px;">.</p><p style="margin-left: 20px;"></div> </p><p></div> </p>

Step 2: Scrolling by Kendo JS code to the bottom and to the top

The second step is to write the JavaScript code that would programmatically scroll the view to the bottom.

var scroller = $("#container-scroller").data("kendoMobileScroller");

var scrollY = scroller.scrollHeight() - $("#container-scroller").height();

scroller.animatedScrollTo(0, -1 * scrollY);

The first line would get a Kendo instance of the container-scroller we have created. The second line would calculate the number of vertical pixels (height) that would be scrolled down. The third line would scroll the scroller with some animation. To scroll the scroller to the top it would be much easier than scrolling to the bottom. You'd simply need to reset the scroller using the following line of code:


You'r done!

Try the above example and if you had any problems or questions, feel free to leave a comment.

What You Should Read Next

The following articles are related to scrolling kendo mobile views with code in 2 steps.

App development has many faces in terms of devices such as laptops, mobile, and tablet but the result is the same only the languages might differ.

A super easy thorough 3 steps guide create an editable Kendo grid using MVC razor wrappers and exploring all available configurations adjusting the grid.

The complete guide to adding a Kendo file upload to a Kendo grid in inline editing mode in MVC with videos, screenshots and code snippets in 6 steps.

A super easy 3-steps guide to how to integrate a Kendo UI dropdown inside a Kendo grid MVC with code snippets providing thorough workarounds to its issues

Fady Soliman
Fady SolimanMember since
Jun 22, 2013
Did you find this helpful?
Leave your Comment
Contact us now!