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

Question

iOS设备（很可能是Android设备）有不同的滚动行为：在整个滚动完成后，scroll事件只会被触发一次。

我该如何检测浏览器是否遵循这种方式呢？

我可以使用window.Touch或Modernizr.touch，但它们并未告诉我任何关于滚动行为的信息，这就好比问一个人是否法国人来理解他们是否喜欢羊角面包，对吧？ :)

- fregante

---

2015年注：iOS 8和Android/Chrome似乎在滚动时都会触发滚动事件（尽管不像在桌面上那样频繁）。 - fregante

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()将是您的滚动处理逻辑。

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

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

- jfriend00