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?

Synecdoche

I have a feeling that placing a listener on the links is the way to go. I.e. when a link is clicked (which is accidentally happening in this case) it prevents default behavior, checks if the users scrolls and if not opens the link anyway? Hopefully this inspires you or someone else. (I'd love to know if this is not the way to go) – Microscopium

Do you still need iScroll with iOS5 being out? Why not use -webkit-overflow-scrolling: touch – Jerk

I'd like to have the same functionality on both desktop and mobile. This is the only one i rly know is okay. According o user reviews etc. – Synecdoche

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.

Elane

Also as a side note. The scroller doesn't work for me in IE8.It dies with an error: Object doesn't support this property or method Line: 52 Char: 5 Code: 0 – Elane

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

Mirella

Thank you for the new patched version! And just in time, lucky me! – Anselmi

Is there a version of this patch for new (4.2) iscroll version? – Lippi

Answer 3

solution did not work for me, here's my simple fix. Set dragging to true when dragging, set it to false when not. If click when dragging, ignore it.

 var myScroll = new iScroll("scroll1", { onBeforeScrollMove: function () {
            window.dragging = true;
        },
            onScrollEnd: function () {
                //had to use a timeout here because without it it would fire on links at the end of the drag / dragging slowly
                setTimeout(function () { 
                    window.dragging = false;
                }, 10);
            }

        });

and on the anchors check for dragging

    $(".myanchors a").click(function () { 
        if (window.dragging) {
            return false;
        }
    });

Cosper

Answer 4

Hello here is modified version of iScroll 4.2.5 to download

iScroll 4.2.5 + click fix

onBeforeScrollStart: function (e) {if(!hasTouch) e.preventDefault();},

Waldos