javascript - 如何检测滚动事件是否像在触摸设备上一样*仅触发一次*？

Question

iOS 设备(可能还有 Android 设备)具有不同的滚动行为:scroll 事件仅在整个滚动完成后触发一次。

我如何检测浏览器是否以这种方式运行？

我可以使用 window.Touch 或 Modernizr.touch 但他们没有告诉我任何关于滚动行为的信息，这就像问某人是不是法国人了解他们喜不喜欢羊 Angular 面包吧？ :)

Answer 1

我认为您对检测的看法是正确的，因为有些设备会同时支持触摸和鼠标行为(例如 Windows 8 平板电脑)，有些只支持触摸(手机)，有些只支持鼠标(台式机) .因此，我认为您不能断定说一台设备只有一种行为，因为有些设备可能同时具有两种行为。

假设您真正想做的是弄清楚是应该立即响应每个滚动事件，还是应该使用短暂的延迟来查看滚动目标的最终位置，那么您可以编写一个混合效果在任何一种情况下都可以很好地工作。

var lastScroll = new Date();
var scrollTimer;
window.onscroll = function(e) {

    function doScroll(e) {
        // your scroll logic here
    }

    // clear any pending timer
    if (scrollTimer) {
        clearTimeout(scrollTimer);
        scrollTimer = null;
    }

    var now = new Date();
    // see if we are getting repeated scroll events
    if (now - lastScroll < 500){
        scrollTimer = setTimeout(function() {
            scrollTimer = null;
            doScroll(e);
        }, 1000);
    } else {
        // last scroll event was awhile ago, so process the first one we get
        doScroll(e);
    }
    lastScroll = now;
};

doScroll() 将是您的滚动处理逻辑。

这为您提供了一种混合方法。它总是在最近没有滚动事件时到达的第一个滚动事件上触发。如果有一系列滚动事件，它会在第一个事件上触发，然后等待直到它们停止一秒钟。

您可能需要调整两个数字。第一个确定滚动事件必须有多近才能认为它们是从同一用户操作快速触发的(当前设置为 500 毫秒)。第二个确定您等待多长时间，直到您处理当前滚动位置并假设用户停止移动滚动条(当前设置为 1 秒)。