9

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

我想这样做http://jsfiddle.net/Sg8JQ/（来自jQuery Tools Scrollable with Mousewheel - 滚动一个位置并停止，使用http://brandonaaron.net/code/mousewheel/demos），但我想要一个简短的滚动到框时的动画（如 250 毫秒），以及在一个动画中多次滚动时穿过多个框的能力。（如果我滚动，动画开始滚动到第二个框，但如果我再次滚动，我想去第三个，如果我滚动两次，到第四个，等等）

我首先认为stopPropagation//可以“停止”鼠标滚轮速度（preventDefault和return false;var delta）——这样我就可以计算新滚动事件的数量（可能使用计时器）——但它们都没有。

想法？

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

编辑2：我认为取消绑定鼠标滚轮并在可以停止鼠标滚轮侦听器之后再次绑定它（并且不要听惯性结束）。它没。

编辑3：尝试使用日期（感谢这篇文章），不是最佳但总比没有好http://jsfiddle.net/eZ6KE/

4

3 回答 3

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不会在魔术鼠标或连续滚动设备上触发，而是在具有滚动并通过鼠标滚轮的单击循环停止的普通滚动设备上触发。

于 2015-10-28T00:30:06.400 回答
0

我在我的网站上遇到了类似的问题，经过多次失败的尝试，我编写了一个函数，计算所选框的总偏移量并重新开始动画。它看起来像这样：

function getOffset() {
    var offset = 0;
    $("#bio-content").children(".active").prevAll().each(function (i) {
        offset += $(this)[0].scrollHeight;
    });
    offset += $("#bio-content").children(".active")[0].scrollHeight;

    return offset;
}

var offset = getOffset();
$('#bio-content').stop().animate( {
            scrollTop: offset
}, animationTime);

我希望它能让你了解如何实现你想要的。

于 2012-11-19T17:17:32.983 回答
0

您可以尝试检测车轮何时停止移动，但这会延迟您的响应时间

$(document).mousewheel(function() {
  clearTimeout($.data(this, 'timer'));
  $.data(this, 'timer', setTimeout(function() {
     alert("Haven't scrolled in 250ms!");
     //do something
  }, 250));
});

来源： jquery mousewheel：检测滚轮何时停止？

或实施标志避免新动画的开始

var isAnimating=false;

$(document).bind("mousewheel DOMMouseScroll MozMousePixelScroll", function(event, delta) {
   event.preventDefault();
   if (isAnimating) return;
   navigateTo(destination);
});

function navigateTo(destination){
   isAnimating = true;
   $('html,body').stop().animate({scrollTop: destination},{complete:function(){isAnimating=false;}});
}
于 2014-03-11T18:29:40.517 回答