如何检测滚动事件是否像在触摸设备上一样只触发一次

How do I detect whether scroll events are fired *only once* like on touch devices?

本文关键字：一样 一次 触摸 滚动 检测 何检测 事件 是否      更新时间：2023-09-26

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

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

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

我认为你的检测是对的，因为会有一些设备同时支持触摸和鼠标行为（如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）。

相关文章：