How to NOT-click a href while dragging in iScroll

Question

I have the iScroll enabled on my page.

Notice the images in the scroller are links (so a popup opens for the bigger image, y'know the deal). BUT one of the lovely features of iScroll is that you can drag your mouse to scroll. BUT now, when someone drags it, it automatically opens the image instead of scrolling the bar. Is there a workaround?

Answer 1

I would say append a class to each anchor while the scroller is being dragged. For example append a class name of "dragging" to each anchor while being dragged then remove the class when dragging stops.

That means that you can add a preventDefault to any link which has the "dragging" class. Something along the lines of:

    myScroll1 = new iScroll('scroll1', {
        snap: 'li',
        momentum: false,
        hScrollbar: false,
        onScrollStart: function () {
            $('div#iscroll1 a').addClass("dragging");
        },
        onScrollEnd: function () {
            $('div#iscroll1 a').removeClass("dragging");
            document.querySelector('.indicator > li.active').className = '';
            document.querySelector('.indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
        }
    });
    $('.dragging').click(function (e) {
        e.preventDefault();
    }

This is however untested code so you may need to refine the selectors.

Answer 2

I've created a patch to iScroll that fixes this issue. You can see the diff here: https://github.com/zmathew/iscroll/commit/3d77681a9f4b3a6b5a7579df4443bc53356d5584

Alternatively you can grab the entire patched version of iScroll from here: https://github.com/zmathew/iscroll/tree/prevent-scroll-clicks