Iscroll Won't Let Items Be Clicked

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){

Solution 1:

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

Change this line:

myScroll = new iScroll('wrapper');

For this:

myScroll = newiScroll('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();
}
});

Solution 2:

//SetupmyScrollmyScroll=newIScroll('#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...

Solution 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.

Solution 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 translationreturn /[\-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 scrollerthis.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 freezeyourFreezeEventCallback: function () { 
    myScroll1.freeze();
    //now user can use visible inputs on screen
}

Thawing it would look like:

//user triggered event causes thawyourThawEventCallback: 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.

Solution 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.)