javascript - 如何检查每个新滚动并避免 Apple 鼠标问题(多滚动效果)

Question

我尝试制作一个鼠标滚轮事件脚本，但遇到了一些问题，因为我使用的是 Apple Magic Mouse 及其继续滚动功能。

我想这样做 http://jsfiddle.net/Sg8JQ/ (来自 jQuery Tools Scrollable with Mousewheel - scroll ONE position and stop ，使用 http://brandonaaron.net/code/mousewheel/demos )，但我想要滚动到框时的短动画(如 250 毫秒)，并且在一个动画期间多次滚动时能够通过多个框。 (如果我滚动，动画开始滚动到第二个框，但如果我再次滚动，我想转到第三个，如果我滚动两次，则转到第四个，依此类推。)

我首先想到 stopPropagation/preventDefault/return false; 可以“停止”鼠标滚轮速度(和 var delta)——所以我可以计算新滚动事件的数量(可能使用计时器)——但它们都没有。

想法？

编辑:如果您尝试使用这些鼠标在 Google 日历中滚动，则会切换多个日历，而不仅仅是一个。看来他们也无法解决这个问题。

编辑 2:我认为取消绑定(bind)鼠标滚轮并在可以停止鼠标滚轮监听器后再次绑定(bind)它(并且不要听惯性结束)。它没有。

编辑 3:尝试使用日期(感谢 this post)，不是最佳但总比没有好 http://jsfiddle.net/eZ6KE/

Answer 1

最好的方法是使用超时并在监听器内部检查超时是否仍然有效:

var timeout = null;
var speed = 100; //ms
var canScroll = true;

$(element).on('DOMMouseScroll mousewheel wheel', function(event) {
    // Timeout active? do nothing
    if (timeout !== null) {
        event.preventDefault();
        return false;
    }

    // Get scroll delta, check for the different kind of event indexes regarding delta/scrolls
    var delta = event.originalEvent.detail ? event.originalEvent.detail * (-120) : (
            event.originalEvent.wheelDelta ? event.originalEvent.wheelDelta : (
                    event.originalEvent.deltaY ? (event.originalEvent.deltaY * 1) * (-120) : 0
    ));

    // Get direction
    var scrollDown = delta < 0;

    // This is where you do something with scrolling and reset the timeout
    // If the container can be scrolling, be sure to prevent the default mouse action
    // otherwise the parent container can scroll too
    if (canScroll) {
        timeout = setTimeout(function(){timeout = null;}, speed);
        event.preventDefault();
        return false;
    }

    // Container couldn't scroll, so let the parent scroll
    return true;
});

您可以将它应用于任何可滚动元素，在我的例子中，我使用了 jQuery 工具可滚动库，但最终对其进行了大量自定义以改进浏览器支持并添加了特定于我的用例的自定义功能。

您要注意的一件事是确保超时足够长，以防止多个事件无缝触发。只有当你想控制元素的滚动速度以及应该一次滚动多少时，我的解决方案才有效。如果您将 console.log(event) 添加到监听器函数的顶部并使用连续滚动外围设备进行滚动，您将看到触发了许多鼠标滚轮事件。

令人恼火的是，Firefox 滚动 DOMMouseScroll 不会在魔术鼠标或连续滚动设备上触发，但对于具有滚动和停止的点击周期的普通滚动设备鼠标滚轮。