As I am still developing webapps for iOS, I keep coming across problems needing a fix. As webapps are still quite ‘new’, there sometimes is no sollution yet, which requires you yourself to come up with one. Here’s another one I’d like to share: combining iScroll and jQTouch. Again, without resorting to a fork, or modifying existing jQTouch/iScroll scripts. This way, you don’t need to modify any html-code except adding the script in your header, allowing for easy undo. Also, it seems to play nice with jQTouch.

Note: This is a semi-solution: it adds scrolling to all your ‘screens’ and keeps the toolbar at the top, but does not add a footer yet. I abandoned the use of iScroll because it wasn’t really adding anything to my app, but I was very keen on finding out if it would work with jQTouch, so feel free to adapt and build on the script.

The script basically looks for all your screen-divs, takes all content *but* the toolbar, and wraps it in two divs: ‘wrapper’ and ‘scroller’. It also destroys and re-creates the iScroll object eacht time you navigate your pages. This way it only requires 1 iScroll object.

As said, I stopped working with iScroll so I did not get around to including a footer. Feel free to build upon this script!

As said: add iScroll to the <script> tag in your header, and then add the following script somewhere:

$('body > * > *').each(function(){
        $(this).children().not('.toolbar').wrapAll('<div id="wrapper" /></div>'); //Adds the wrapper div
        $(this).children('#wrapper').wrapInner('<div id="scroller" /></div>'); // Adds the scroller div *inside* the wrapper div
    });
    var myScroll = new iScroll('wrapper', {checkDOMChanges: false} ); // Initialize the iScroll object
    $('body > * > *').bind('pageAnimationEnd', function(e, info){ // Destroy and re-create the iScroll object on every navigation
        if (info.direction =='in'){
            if (myScroll) {myScroll.destroy();}
        if ($('div#'+e.target.id+' #wrapper').get(0)) {
            setTimeout(function () { myScroll = new iScroll($('div#'+e.target.id+' #wrapper').get(0)); }, 0);}
        }
    });

Just make sure to include the above script on a pageload (after a $(document).ready(function(){ for example). If you have any problems getting it to work (e.g. the ‘rubber band’ effect, where the scrolling just snaps up again after you let go), look at the iScroll documentation and the initialization line in my script.