Enable click events in iScroll on mobile browser

Question

I'm using iScroll to create a web app and I'm unable to click any divs that are within the iscroll wrapper. I tried setting eventPassthrough option to be true but it causes a significant amount of scrolling problems.

Anyone experienced this?

Edit: I'm using iScroll 5. The click events work chrome,firefox, and safari but not ios mobile safari.

Answer 1

Try setting the option "click: true"

example:

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

I had the same problem on IOS6 and it fixed the issue

Answer 2

I also ran into the same problem and began using the { click: true } approach (indicated above) as a solution. The problem with this approach is you will get two click events firing when viewed on the desktop (i.e. one event from actual mouse click, and one event from IScroll).

The suggested approach per the IScroll documentation is to emit a custom 'tap' event using the IScroll options.

Example:

<script type="text/javascript">
    var scroller = new IScroll('#wrapper', { tap: true });
    $('#scroller').on('click, tap', '.clickable', function() {
        //do something....
    });
</script>

<div id="wrapper">
    <div id="scroller">
        <div class="clickable"></div>
        <div class="clickable"></div>
        <div class="clickable"></div>
    </div>
</div>

Answer 3

Try to add click: true for iphone. Android worked for below both. But android worked without click: true.

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