Using jQuery Mobile and iScroll4 is actually pretty simple once you figure out how it all works. I implemented iScroll-Lite, which lacks a bunch of the extra features touted on the developer’s homepage. This works with version 1.1 final of jQuery Mobile!!
Download iScroll and find the iscroll-lite.js file.
Download the jQuery iScroll4 Plugin from GitHub.
Link these two files in your main index.html like so:
1 2 3 4 |
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.1.0.min.js"></script> <script type="application/javascript" src="js/iscroll-lite.js?v4"></script> <script src="js/jquery.mobile.iscroll.js"></script> |
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.1.0.min.js"></script> <script type="application/javascript" src="js/iscroll-lite.js?v4"></script> <script src="js/jquery.mobile.iscroll.js"></script>
Now in every page that you want to have fixed headers with a body scrolling in the middle, please the following tag:
1 |
<section data-role="page" id="page1" data-iscroll="enable"> |
<section data-role="page" id="page1" data-iscroll="enable">
or if you aren’t using HTML5 yet (which you should):
1 |
<div data-role="page" id="page1" data-iscroll="enable"> |
<div data-role="page" id="page1" data-iscroll="enable">
Last but not least, put a data-iscroll tag on the scroll scrolling element.
In the end, it should look something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<section data-role="page" id="page1" data-iscroll="enable"> <header data-role="header" data-id="persist" data-position="fixed" data-tap-toggle="false"> <h1>D&D</h1> <a href="#" data-icon="gear" class="ui-btn-right">About</a> </header> <div data-role="content" class="content"> <div data-iscroll="scroller"> <ul data-role="listview"> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </div> <footer data-role="footer" data-id="persistFooter" data-position="inline" data-tap-toggle="false"> <div data-role="navbar"> <ul> <li><a href="#page1" data-transition="fade" class="ui-btn-active ui-state-persist">Character</a></li> <li><a href="#page2" data-transition="fade">Stats</a></li> <li><a href="#page3" data-transition="fade">Gear</a></li> <li><a href="#page4" data-transition="fade">Skills</a></li> </ul> </div> </footer> </section> |
<section data-role="page" id="page1" data-iscroll="enable">
<header data-role="header" data-id="persist" data-position="fixed" data-tap-toggle="false">
<h1>D&D</h1>
<a href="#" data-icon="gear" class="ui-btn-right">About</a>
</header>
<div data-role="content" class="content">
<div data-iscroll="scroller">
<ul data-role="listview">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
<footer data-role="footer" data-id="persistFooter" data-position="inline" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li><a href="#page1" data-transition="fade" class="ui-btn-active ui-state-persist">Character</a></li>
<li><a href="#page2" data-transition="fade">Stats</a></li>
<li><a href="#page3" data-transition="fade">Gear</a></li>
<li><a href="#page4" data-transition="fade">Skills</a></li>
</ul>
</div>
</footer>
</section>
Good luck! That took me way longer than it should have…
About the Author: Sprawl
Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.
Hey,
How will it work for the case where there are multiple pages, and the dom is loaded via Ajax.
It should although I tend to use a single HTML page layout for most of my Apps. It just seems easier.
for me its not working with multiple pages.
Sorry dude. I don’t have a ton of experience with iScroll because I quickly moved over to Cordova/PhoneGap’s NativeControls. Are you using PhoneGap?
Hi, i’m creating my first native app and only one problem that distresses me from 4 days. I hope that you can help my.
1)iscroll apparently work fine (with your script) but in my home page i have a dynamic list create btween an ajax request, the scroll of this fortunaly is fluid but very slow. How i can incrase the speed of scroll?
2) each of the list have a link text. if i click on one of this links, before the transition, my list come on the top. This create strange and bad visual effect. How can i solve?
Thanks for help and compliment, i see that you help a lot of people on jquery mobile forum.
Typically links are really crappy in jQuery. One way to fix them is to remove the link, and attach an event to each line. This way the rendering is faster, and the “a link” is attached as it loads instead of before.
Hi! I have an interesting quirk in my app I was wondering if you could help me with. I have been using jquery and iScroll in my app for some time now and I recently read your native controls post and decided to implement a tabbar. My tabbar came out perfectly (thank you!). What I found out though is that if I hide the tabbar, it leaves a white void on the bottom of the page. If I click on my iscroll content, the void goes away as the scroller resizes. However, once I show the tabbar again, the scroller does not resize and it cuts off the bottom of the content which is hiding behind the bar. The only way to fix this is to go to another page in the same file and then come back. Any ideas on how to resize without changing pages?
Thanks!
Mike Klein