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.

Unthoughtof

which version are you using of iscroll? – Rasla

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

Tricksy

You should also note, you may need to add tap: true – Leucite

Great! Solved my issues on iphone – Deportation

@VladislavRastrusny it is off by default, because this is causing some double click events on Android (on some devices at least) – Moo

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>

Denaturalize

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,    
});

Inference