iScroll won't let items be clicked

Question

I am using iScroll4 and it's working great!

This are the functions I use to init, refresh and end iScroll:

function iniciarIscroll(){
    /*En ie7 no lo usamos*/
    if(!ie7){
        $(document).ready(function() {
            myScroll1 = new iScroll('nvl1');
            myScroll2 =new iScroll('nvl2');
            /*document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', setTimeout(function () { loaded(); }, 200), false);*/
        });
    }
    return false;
}

function refrescarIscroll(){
    if(!ie7){
        myScroll1.refresh();
        myScroll2.refresh();
    }
    return false;
}


function terminarIscroll(){
    if(!ie7){
        myScroll1.destroy();
        myScroll1 = null;
        myScroll2.destroy();
        myScroll2 = null;
    }
    return false;
}

The problem is it won't let <a> or <input> or anything to be clicked (or focused, I am not sure); also css :hover or :focus won't be applied; but it would fire events in javascript like

.hover() or .click()

Any idea how to solve this if possible?

Answer 1

You just need to make this changes in the loader of the iscroll:

Change this line:

myScroll = new iScroll('wrapper');

For this:

myScroll = new iScroll('wrapper', {
useTransform: true,
zoom: 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();
}
});

Answer 2

I also have been working on making things scroll smoothly in the mobile environment and iscroll was one of the libraries I considered in my search for the right tool. Other answers have suggested how you can fix your specific problem but I would actually suggest using either scrollability (by Joe Hewitt) or touchscroll (by David Aurelio). I think that scrollability actually offers the best feel but it isn't really done and you would end up facing the same or similar issues. I am personally using touchscroll for a project of mine and I recommend it.

I had to put in custom clicking actions and timeout checking when I was experimenting with iscroll a few weeks ago in my project and I did so by commenting out the e.preventDefault() on the start of the touch and inserting some of my own functions to catch when it actually scrolls. At their heart these libraries all work the same way (catching events and preventing them, running css transforms to make smoother than DOM-redrawing animations, then artificially firing any events that should be fired). This means the other way you can fix it is to find when the event of the click for your specific elements should happen and fire it manually in the code. In touchscroll it listens for events on the uppermost element so you can overwrite behavior by simply stopping bubbling... I can't remember if iscroll does the same.

This (smooth, native feeling, animation in mobile) is still an area which is at the edge of the various technologies so no one has the complete solution yet. I would expect in a few years, mobile improve so that mobile browsers just handle scroll events natively anyway but until then we are forced to hack together solutions like these. Good luck!

Answer 3

The author has commented that form compatibility is glitchy - it's a known issue and he's working on a fix for the next version. Someone else has commented in the forums:

As of v4.1.9, support for form fields is still under development. You can make radio buttons and checkboxes work by wrapping in a label (wrapping seems to work better possibly than using for="" syntax).

Links should be fine and work in the demos provided. You've commented out the e.preventDefault() call in your init script which is the usual culprit. Maybe the form compatibility issue is affecting links also?

As for the hover event, from what I can tell this should be activated when an element is tapped.

Hope that helps a little. Worst case scenario - scrap your code and start with a demo page from the project, adapt to your needs one line at a time and keep testing it. You'll soon know which modification breaks the intended behaviour.

Answer 4

When I first discovered iScroll, I thought it was the solution to many of my problems. Then this issue bit me big time. While trying to find a workaround, I came up with this pull request.

There is a note on the pull request that another, better, solution has been found though I'm not sure which pull request is/was supposed to fix the issue. I'll see if I can get more detailed info from the author of that note.

Update: The relevant pull request can be found here. I haven't had a chance to test it yet (I hope to confirm Android support later today.)

Answer 5

Try this

myScroll = new IScroll('#wrapper', { click: true });

Answer 6

comment out

position:absolute;

at #pageWrapper in styles.css

In my case, this solved the above unclickable issue.