Question

我正在使用http://nick-jonas.github.io/windows/的修正版本，允许用户在DIV内部滚动不同的部分，然后重新捕捉到位。

因为我正在滚动DIV而已取代：

$('.windows').animate({scrollTop: scrollTo }, options.snapSpeed, function(){
                    if(!completeCalled){
                        if(t){clearTimeout(t);}
                        t = null;
                        completeCalled = true;
                        options.onSnapComplete($visibleWindow);
                    }
                });

使用：

$('.windows').scrollTo( $visibleWindow , options.snapSpeed, { onAfter:function(){
                    if(!completeCalled){
                        if(t){clearTimeout(t);}
                        t = null;
                        completeCalled = true;
                        options.onSnapComplete($visibleWindow);
                    }
                }});

因此，您可以看到我使用scrollTo插件跳转到可见的div，而不是像前面的代码那样依赖复杂的偏移量。

我已经注意到的原始代码和我自己的错误是，如果捕捉已经开始，然后用户通过滚动来中断此操作，他们将最终与滚动事件进行战斗以滚动内容。因此，如果scrollTo向下滚动100个像素，然后他们尝试使用浏览器滚动条向上滚动300个像素，则屏幕会在事件和浏览器滚动时出现争用。

关于如何阻止这种情况的任何想法？我希望现在我正在使用scrollTo插件，处理它会变得更容易。

到目前为止，我已经尝试过：

$('.windows').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
         $(this).stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup');
    }
});

但是这样就可以阻止所有攻击的发生...任何修复的想法？

Answer 1

你可以试试吗

$('.windows').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
     $('.windows').stop(true,false);
}
});

语法是.stop（[clearQueue]，[jumpToEnd]）

Answer 2

This answer至another question似乎可以解决您的问题。基本上，您只需绑定到scroll，wheel以及可能指示用户正在滚动的其他事件，然后检查滚动是否是由用户引起的。如果是这样，请停止动画。

这是有问题的功能（归功于Mottie）：

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e){
    if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel") {
        $("html,body").stop();
    }
});

根据我对您的问题的理解，您可能希望将上面的$("html,body")和$('body,html')替换为$('.windows')，如下所示：

$('.windows').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e){
    if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel") {
        $(".windows").stop();
    }
});

There's a working demo

用户滚动时停止当前scrollTo事件

2 个答案: