jQuery mobile + iScroll, cannot scroll down

Question

I'm trying to integrate jQuery Mobile with iScroll 4. I am aware that there is already a project that does this, however, I'm avoiding it due to a bug with input-elements (page jumping like crazy when typing).

My current implementation looks like this:

http://jsfiddle.net/AqHsW/ - (JSFiddle example) [Alternative mirror]

As you probably noted, this works flawlessly, except for one major catch: one cannot scroll down. This problem seems to be cross-os / browser.

However, if my I override the onBeforeScrollStart method:

var scroller = new iScroll('wrapper', { onBeforeScrollStart: null });

It works somewhat better. Now one can scroll, but the behaviour gets glitchy (along with slow responsiveness) instead, allowing the user to scroll how high he wants and so on.

(Doing this only seems to alter things on iOS, however)

I'm now looking for a solution to this problem, which preferably supports iOS 5 and 6, along with the use of <input> elements. This should be a pretty common problem, considering that iScroll and jQuery Mobile are the two dominating frameworks today.

Answer 1

I played a bit with your code, found a couple of things and a solution, check the jsfiddle.

• Since your loading jQuery, make use of jQuery(document).ready().

• It seemed more appropriate to init iScroll on the wrapper's direct child element rather than the wrapper.

• Instead of setting the wrapper height via CSS, I used javascript to be more precise and avoid overflows.

• FYI, scroll was already defined as a function. (in your fiddle you used scroll as a variable)

• Now it works like a charm!

---

$(function(){

    var footerHeight = $('[data-role="footer"]').outerHeight(true),
        headerHeight = $('[data-role="header"]').outerHeight(true),
        padding = 15*2; //ui-content padding

   $('#wrapper, #scroller').height( $(window).innerHeight() - headerHeight - footerHeight - padding );

   // To make inputs focusable,
   // you can rebind their touchend's event to trigger their focus

   $('input').on('touchend', function(){
       $(this).focus();
   });

   var iScroller = new iScroll('scroller');

});​