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?

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) — Joep, Jan 22 '12 at 23:06
Do you still need iScroll with iOS5 being out? Why not use `-webkit-overflow-scrolling: touch` — Matijs, Jan 23 '12 at 00:16
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. — Don Munter, Jan 23 '12 at 13:31

score 3 · Answer 1 · answered Jun 05 '12 at 01:23

3

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

answered Jun 05 '12 at 01:23

Zach Mathew

451
5
5

Thank you for the new patched version! And just in time, lucky me! – Yisela Jun 05 '12 at 04:55
2

Is there a version of this patch for new (4.2) iscroll version? – Alvaro Aug 04 '12 at 15:55

Zappa · Accepted Answer · 2012-01-23T00:42:24.997

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.

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 — Zappa, Jan 22 '12 at 23:18

score 0 · Answer 3 · answered Feb 12 '14 at 13:08

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

score -2 · Answer 4 · answered Jun 25 '13 at 08:23

-2

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

answered Jun 25 '13 at 08:23

onebeat

17
1
4

How to NOT-click a href while dragging in iScroll

4 Answers4