如何在使用iScroll滚动时避免点击链接（a href）？

Question

我在我的网页上启用了iScroll。

请注意，滚动条中的图片是链接（因此会弹出更大的图片）。但是iScroll的一个可爱功能是您可以拖动鼠标来滚动。但现在，当有人拖动它时，它会自动打开图像而不是滚动条。有没有解决方法呢？

- Don Munter

---

我有一种感觉，在链接上放置一个监听器是正确的方式。也就是说，当点击链接时（在这种情况下意外发生），它会防止默认行为，检查用户是否滚动，如果没有，则仍然打开链接？希望这能激励你或其他人。 （如果不是这样做，请告诉我） - Joep

iOS5已经发布，您还需要iScroll吗？为什么不使用“-webkit-overflow-scrolling: touch”呢？ - Matijs

我希望在桌面和移动设备上拥有相同的功能。这是唯一一个我确信可以满足用户评价等要求的选项。 - Don Munter

Answer 1

我已经为iScroll创建了一个补丁，修复了这个问题。您可以在此处查看差异： https://github.com/zmathew/iscroll/commit/3d77681a9f4b3a6b5a7579df4443bc53356d5584 或者，您可以从此处获取整个修补后的iScroll版本： https://github.com/zmathew/iscroll/tree/prevent-scroll-clicks

- Zach Mathew

---

谢谢您提供新的修补版本！而且来得正是时候，我真是太幸运了！ - Yisela

这个补丁有没有适用于新的（4.2）iscroll版本的版本？ - Alvaro

Answer 2

我建议在拖动滚动条时为每个锚点附加一个类。例如，当拖动时为每个锚点附加一个名为“dragging”的类，然后在停止拖动时删除该类。

这意味着您可以向任何具有“dragging”类的链接添加preventDefault。 类似于以下内容：

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

这是未经测试的代码，因此您可能需要完善选择器。

- Zappa

---

还有一件事需要注意的是，在IE8中，滚动条对我来说无法正常工作。它会出现错误：对象不支持此属性或方法，行：52，字符：5，代码：0。 - Zappa

Answer 3

这个解决方案对我不起作用，这是我的简单修复方法。 当拖动时将dragging设置为true，当不拖动时将其设置为false。如果在拖动时点击，请忽略它。

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

        });

并检查拖动锚点

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

- Contra

Answer 4

你好，这里有修改版的iScroll 4.2.5可供下载

iScroll 4.2.5 + 点击修复

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

- onebeat