1. Home
  2. blog
  3. 2011
  4. 11
  5. Scrolling programmatically with jquery mobile

Scrolling programmatically with jquery mobile

Posted on 14/11/2011 by Charalampos Chrysikopoulos

My last task was to create a mobile app for iOS and android platforms. I decided to use phonegap as a write once run anywhere solution.

After some search in the web we found two libraries to help us build the UI:

<ol>
<li><a title="jQuery mobile" href="http://jquerymobile.com/" target="_blank">jQuery mobile</a></li>
<li><a title="Sencha touch" href="http://www.sencha.com/products/touch/" target="_blank">Sencha touch</a></li>
</ol>
We tried both for a while and decided to use jQuery mobile only for one reason. Although its still in alpha version, it supports scrolling. It is not obvious, but you can find some demo pages here: http://jquerymobile.com/test/experiments/scrollview/
So we used this features and they worked fine, till some day we needed to control the scroll position programmatically.
Say, we have a div in our code, that we want it to be vertically scrollable. Lets baptise the div with the id "scrollDiv". Normally,  we give the div a data-role, in this case data-scroll="y". So our div looks like

<div id="scrollDiv" data-scroll="y">
<!-- vertically scrollable content here -->
</div>
The solution to this problem is the following line:

$("#scrollDiv").scrollview("scrollTo", 0, 0);
Thats all...
This entry was posted in javascript and tagged javascript, jquery mobile, mobile by Charalampos Chrysikopoulos