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.

Techno

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');

});​

Sophisticate

Thanks a lot for your effort and help, it's really, really appreciated! Your solution fixes the initial problem, however, only the first element will be scrolled. [ jsfiddle.net/NUK88/4 ] (the other content is left in the background, un-scrolled).. Nor cannot <input> elements be selected. I've tried various onBeforeScrollStart overrides, but them all breaks your solution.. – Techno

You don't happen to have any ideas on how to solve this? I'm pretty stuck. – Techno

Your welcome, I updated my answer to include the un-selectable inputs fix, however, I can't see the other problem you'r describing about the first element being scrolled only. – Sophisticate

Thank you once again, that fix worked perfect aswell. jsfiddle.net/6jXfy Here, the <h1> isn't visible (it's under the header), but that's the scroll-able element, and the list is not scrollable. I'm testing on iOS 6 and Firefox 16. – Techno

@Techno That is because your h1 is not in the right place, and currently being considered as one of iScroll's scrollable-items, he should be a direct child of #content. jsfiddle.net/VDrUT/3 – Sophisticate

I'm actually trying to get all content (data-role="content") to be scrollable, that means trying to get the (in this case) <h1> to scroll along with the rest of the content. In other words, all #scroller content.. Haha got messy, I hope you understood me. – Techno

Ah my bad didn't get that, the whole content scrollable updated here jsfiddle.net/VDrUT/4 – Sophisticate

@Sophisticate Hello again, I've been playing around a bit with your solution and it's working as expected. One catch, though. It only works if run through $(document).ready(), and not $("#page-id").bind('pageinit', function() { /* here */ }); `. This means that it only can be run on the first page, and not on several pages.. Any idea for a solution? – Techno

@Zar, not really. I think we have derived from the main question here. This should be another question with more info on the problem and more complete code :) – Sophisticate

@Sophisticate You're absolutely right. Thanks so much for all your help, it's truly, truly appreciated! I owe you a big one. :-) – Techno

Answer 2

You may see this demo: http://lab.cubiq.org/iscroll5/demos/event-passthrough/

myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false, preventDefault: false });

Oleaceous