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

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 2

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 3

  // Setup myScroll
  myScroll = new IScroll('#wrapper', {
    scrollX: horizontalSwipe,
    scrollY: !horizontalSwipe,
    momentum: false,
    snap: document.querySelectorAll('#scroller .slide'),
    snapSpeed: 400,
    bounceEasing: 'back',
    keyBindings: true,
    click: true
  });

For me, I just need to add click: true on the last line... Spent the whole day debugging and implementing all the suggested solutions to no avail...

Answer 4

One work around I've used is to "freeze" the iscroll when I want the user to be able to make edits. The incompatibility that iScroll has with inputs is related as far as I can tell to the css transformations in combination with the touch support it applies to the content in the scroller. If you temporarily disable the scroller, you can allow the user to enter in values. The trick is to make sure the current scroll location of the content is preserved on disabling. When "frozen" a user can update the inputs within the visible area. The downside is that the scroller won't scroll during this state. You'll have to thaw it on some event.

I added these functions to the iScroll.prototype to make this work:

_get_current_scroll_px: function (transformStyle) {
    //return the first string that looks like an integer, that should be the x translation
    return /[\-0-9]+px/.exec(transformStyle)[0];
},


freeze: function () {
    this.disable();
    this.savedStyle = this.scroller.style[vendor + 'Transform'];
    this.scroller.style['marginLeft'] = this._get_current_scroll_px(this.savedStyle); //use margin left instead of transform to position scroller
    this.scroller.style[vendor + 'Transform'] = '';
},

thaw: function () {
    this.scroller.style[vendor + 'Transform'] = this.savedStyle;
    this.scroller.style['marginLeft'] = '0';
    this.enable();
}

Calling or freezing it would look like:

//user triggered event causes freeze
yourFreezeEventCallback: function () { 
    myScroll1.freeze();
    //now user can use visible inputs on screen
}

Thawing it would look like:

//user triggered event causes thaw
yourThawEventCallback: function () { 
    myScroll1.thaw();
    //now scrolling is back and inputs can no longer be edited or in focus
}

Obviously, you'll need to integrate this in to your own project somehow but it has worked for me. It isn't ideal so I'm looking forward to the iScroll update. Warning: this isn't tested in IE so I won't vouch for it there. I hope this is at least a start to help you get to a work around.

Answer 5

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 6

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 7

Android browser bug is result of very old version of WebKit inside Android, even inside Android 4.3. The root cause of bug - wrong processing of the click event that iScroll sends back to the browser (removing preventDefault just stops sending this click event) The Android Chrome browser is free from this bug because it has upgraded WebKit library inside.

Waiting for Android WebKit upgrade from Google.

Answer 8

comment out

position:absolute;

at #pageWrapper in styles.css

In my case, this solved the above unclickable issue.

Answer 9

Try this

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