Question

I’m building a mobile app that targets Android 2.2+, Blackberry 9+ and iOS 4+. In our stack we are using Phonegap, jQuery and iScroll (amongst others).

One of our app screens looks like this (text redacted for anonymity) – running in the iOS 5 simulator’s Safari.

As you can see, this is a typical input screen with a fixed header, and multiple block-level form elements stretching the full with of the device screen, less padding.

As I mentioned, our app uses iScroll. We’re initialising it on this page using the following code (taken from the iScroll ‘forms’ sample).

// ...

window.scroller = new iScroll(id, {
    useTransform: false,
    onBeforeScrollStart: function(e) {
        var target = e.target;
        while (target.nodeType != 1) target = target.parentNode;
        if(target.tagName != 'select'
            && target.tagName != 'input'
            && target.tagName != 'textarea') {
            e.preventDefault();
        }
    }
});

// Disable touch scrolling (Req'd for iScroll)
window.document.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, false);

// ...

On this screen, I’ve noticed that the content scrolls fine when the user touches any part of the background, but doesn’t scroll when you begin the scroll gesture (swiping up or down) by touching one of the input elements. As you can understand this essentially makes this screen impossible to use, hence me looking for a fix.

I’ve since found the culprit line in iScroll;

if (nodeName == "TEXTAREA" || nodeName == "INPUT" || nodeName == "SELECT" ) return; 

(179 in iscroll.js), an open issue for this bug with a claimed fix, and one pull request that claims to fix it, however the author of the bug seems to have incorrect line numbers, preventing me from attempting that fix, and the mentioned pull request doesn’t work for me (tested on iOS 5.1, Android 4.0.4).

My question – is there some way to allow a user to scroll (using iScroll) when touching an input element? If not, iScroll is completely useless in cases like this. At the moment, I’m looking at either

• Using the Overthrow shim that claims to have identical functionality to iScroll – however this isn’t a great option due to various issues with Android – one of our key platforms.
• Doing away with iScroll and loosing my fixed header.

It’s 2012 – do we still not have a way to do this on Mobile browsers?!?

Answer 1

I had exactly the same problem and used the following when I set up my iScroll:

var ISCROLL_MOVE;

var ISCROLL_MOVE_LIMIT=10;

// ... functions to include when you set up your iScroll
onScrollStart: function(e) {
                ISCROLL_MOVE=0;
            },
            onScrollMove: function(e) {
                ISCROLL_MOVE_LIMIT++;
            }

Then when you have any form elements in your iScroll, e.g.:

var selectField = document.getElementById('mySelectField');

selectField.addEventListener('touchend' /*'mousedown'*/, function(e) {

        if (SCROLL_MOVE<SCROLL_MOVE_LIMIT)
            this.focus();

    }, false);

Note the action is on a touch end event, and it allows for scrolling iScroll pages when the user touches on a form element – basically it measures the amount of scrolling ( or not ) which the user is making ( the amount of SCROLL_MOVE ). If its more than 10 ( the SCROLL_MOVE_LIMIT seems like a good number to me ) then the field won’t grab focus , otherwise it will.

Let me know if you need more detail.