OSX惯性滚动导致mousewheel.js以最小的滚动运动注册多个mousewheel事件 [英] OSX inertia scrolling causing mousewheel.js to register multiple mousewheel events with the slightest scroll motion

问题描述

我正在研究一个非常标准的Flexslider实例. Flexslider 与 jquery.mousewheel.js 插件，允许幻灯片在鼠标滚轮事件上移动.

I have a pretty standard Flexslider instance I'm working on. Flexslider incorporates well with the jquery.mousewheel.js plugin, allowing slides to move on mousewheel events.

但是，Mac OSX和其他操作系统使用'intertia'来滚动效果，几乎不可能只左右滚动一张幻灯片.通常的效果是，在这种情况下，即使是最轻微的滚动运动也会触发多个鼠标滚轮事件，并使滑块向左或向右滚动多个图像.显然，这不可能发生！

However, Mac OSX and others employ 'intertia' to scrolling effects, making it virtually impossible to scroll only one slide left or right. The general effect is that even the slightest scroll motion in these situations triggers multiple mousewheel events and scrolls the slider multiple images left or right. Obviously, this can't happen!

我认为解决方案是使用 underscore.js -特别是'debounce'函数.但是，我对JS/jQuery相对缺乏经验，无法弄清楚如何实现它.

I think the solution is to use underscore.js - specifically the 'debounce' function. However, I'm relatively inexperienced in JS / jQuery and can't figure out how to implement it.

来自下划线的文档:

去抖动: _.debounce(function, wait, [immediate])

创建并返回一个 传递函数的新的去反跳版本，它将推迟其 从上一次执行到等待毫秒后执行 它被调用的时间.对于实现仅应执行的行为很有用 输入停止到达后发生.例如:渲染一个 Markdown注释的预览，重新计算窗口后的布局 已经停止调整大小，依此类推.

Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on.

为即时参数传递true会导致反跳触发 在等待的前沿而不是后沿起作用 间隔.在防止意外情况下很有用 再次单击则双击提交"按钮.

Pass true for the immediate parameter to cause debounce to trigger the function on the leading instead of the trailing edge of the wait interval. Useful in circumstances like preventing accidental double-clicks on a "submit" button from firing a second time.

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

这是我用来初始化flexslider的代码:

Here's the code I'm using to initialize flexslider:

// MOUSEWHEEL FIX:

function debounceEffect() { // apply debounce to mousewheel here

}

// Initialize FlexSlider
$(window).load(function() {     
    $('div.flexslider').flexslider({
        animation:'slide',
        controlNav:true,
        mousewheel:true,
        pauseOnHover:true,
        direction:'horizontal',
        animationSpeed:500,
        slideshowSpeed:5000,
        after:debounceEffect
    });
});

不幸的是，我不知道如何将去抖功能应用于鼠标滚轮事件.我想我只是不太了解运动部件.

Unfortunately, I can't figure out how to apply the debounce function to the mousewheel event. I think I just don't understand the moving parts well enough.

这是来自flexslider的相关代码插件:

    // MOUSEWHEEL:
    if (vars.mousewheel) {
      slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
        event.preventDefault();
        var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
        slider.flexAnimate(target, vars.pauseOnAction);
      });
    }

如果重要的话，我可以对其进行编辑以包括一些mousewheel插件代码，或者您可以在

I can edit this to include some of the mousewheel plugin code as well if that's important, or you could check it out on github.

在此方面，我将不胜感激！

I would appreciate any help on this!

推荐答案

我认为主要问题是您将无法应用反跳作为后效，或者至少我不知道该怎么做.让我们来谈谈各个部分的工作原理:

I think the main problem is that you won't be able to apply debouncing as an after effect, or at least I wouldn't know how. Let's talk through how the pieces work:

当您调用$('div.flexslider').flexslider({ .. }时，jQuery会找到所有像div.flexslider这样的元素(通常)，然后向其中添加一个flexslider. flexslider添加了所有使其成为滑块的机制，包括设置绑定事件.您需要去抖动的是实际的绑定事件本身.

When you call $('div.flexslider').flexslider({ .. }, jQuery finds all the elements like div.flexslider (as usual) and then adds a flexslider to that. flexslider adds all the machinery to make it a slider, including setting up bind events. It's the actual bind events themselves that you need to debounce.

似乎您通过找到相关的flexslider绑定代码已经很接近了.我认为您最理想的是:

Seems like you got pretty close by finding the relevant flexslider bind code. I think what you'd want ideally is this:

if (vars.mousewheel) {
  slider.bind('mouse wheel', _.debounce(function(…) {
   // usual flex slider code.
  }), 300);
}

我不确定在不直接编辑flexslider代码的情况下如何注入这种去抖动.

I'm not sure how you'd actually inject this debounce without directly editing the flexslider code.

如果要全局影响鼠标滚轮事件(我想可能是这样)，则可能可以对鼠标滚轮插件本身进行反跳操作.我认为您必须包装 removeEventListener .

You probably could debounce the mouse wheel plugin itself, if you want to globally affect mousewheel events (which I guess you might). I think you'd have to wrap the handler in a debounce, and then pass the debounced-handler to the addEventListener and removeEventListener.

这篇关于OSX惯性滚动导致mousewheel.js以最小的滚动运动注册多个mousewheel事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！