3

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

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

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

4

1 回答 1

2

我认为您对检测是正确的，因为有些设备将同时支持触摸和鼠标行为（如 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 毫秒）快速触发。第二个确定您等待多长时间，直到您处理当前滚动位置并假设用户停止移动滚动条（当前设置为 1s）。

于 2012-09-07T01:38:25.260 回答