jQuery Tools Scrollable with Mousewheel - 滚动一个位置并停止

Question

我正在使用bind/unbind进行鼠标滚轮滚动,基于此SO响应:

Jquery,取消绑定mousewheel事件,然后在操作完成后重新绑定它？

我正在从delta中挖掘事件树,仅定位X鼠标轮值.一切都运作良好.我正在努力解决的问题:我想简单地向前/向后滚动一个面板,然后停止滚动.目前,我在移动后立即解除鼠标滚轮事件的绑定,并且有效地停止了滚动...但是解除鼠标滚轮事件的绑定也会使页面突然显示.我需要的是能够嗅探方向的第一个deltaX值,然后移动并停止收听.我是否需要自动寻找答案？绑定/解除绑定感觉很糟糕,但我不能,为了我的生活,想出如何在一次移动后踢出,同时仍然能够在移动完成后滚动.这是我的鼠标滚轮功能:

function mouseHandler(event, delta) {
$('.homeScrollable').bind('mousewheel', mouseHandler);

var deltaX = event.originalEvent.wheelDeltaX;
//console.log(event.originalEvent.wheelDeltaX);

if(deltaX <= 0) {
    //move forward 1 screen and stop
    scrollapi.move(1);
    $('.homeScrollable').unbind('mousewheel', mouseHandler);
} else if(deltaX > 0) {
    //move backward 1 screen and stop
    scrollapi.move(-1);
    $('.homeScrollable').unbind('mousewheel', mouseHandler);
}   
event.preventDefault();

// Rebind mousewheel event:
$('.homeScrollable').bind('mousewheel', mouseHandler);     };

我也看过设定一个计时器,一个la:

jquery mousewheel插件:如何每次滚动只触发一个函数

这似乎令人难以置信,但没有去.这是这个人的插件页面:http: //brandonaaron.net/code/mousewheel/docs

感谢检查出来.

Answer 1

由于DOM没有提供任何区分第一个滚动事件和后续碰撞事件的方法,因为我们不得不考虑区分它们的间接方法.

如果快速滚动浏览任何特定元素,则会按顺序多次触发滚动事件.使用以下代码,我们可以准确了解发生的频率:

$('#exampleDiv').bind('mousewheel', function () {
    console.log(new Date().getTime());
});

当您滚动该div时,您将获得如下所示的控制台输出:

// Using mouse wheelbar
251327626600149
251327626600215
251327626600265
251327626600282
251327626600332
251327626600365

// Using touchpad
251327626626207
251327626626225
251327626626261
251327626626276
251327626626312
251327626626345

看看这个输出,似乎mousescroll事件通常是在彼此20毫秒到60毫秒之间的某个地方发生的.为了安全起见,我们将上端设为100 ms.这是非常有用的信息,因为我们可以使用它来区分属于同一动作的滚动事件和可能由用户明确且故意启动的滚动事件.

你可以从这里做的是创建一个全局可访问的'timestamp'变量,每次mousescroll触发事件时更新它,无论是否成功.像这样的东西:

var timeStamp = new Date().getTime();

$('#exampleDiv').bind('mousewheel', function (event) {
    var timeNow = new Date().getTime();

    // Need to prevent the default scrolling behavior
    event.preventDefault();

    // If the last mousescroll happened less that 100 ms ago, update
    // timeStamp and do nothing
    if (timeNow - timeStamp < 100) {
        timeStamp = timeNow;
        return;
    } else {
        timeStamp = timeNow;
        scrollToSomeOtherDiv();
    }
});

这有效地忽略mousescroll了在它们之前的所有事件之后触发的所有事件,但在用户暂停100 ms后再次开始工作.

这将解决您的问题,除非您的scrollToSomeOtherDiv()函数涉及某种耗时的动画.您当然可以创建一个全局布尔值isAnimating,并在每次mousescroll触发事件时检查它是否为真(确保在动画结束后在回调中将其设置为false).

这可行,除了它可以为用户提供刺耳的体验.即使在看到动画开始之后,想要快速滚动两个面板的人也可能不会在滚动之间暂停.上面的代码将所有mousescroll事件视为相同滚动动作的一部分,并继续忽略它们!

在这种情况下,您可以简单地使用动画时间作为阈值.您可以在动画开始后设置timeStamp,然后忽略mousescroll该段时间内的所有事件.我在这里写了一个例子:http://jsfiddle.net/Sg8JQ/

相关代码在这里:

var lastAnimation = 0;
var animationTime = 1000; // in ms
var quietPeriod = 500; // in ms, time after animation to ignore mousescroll

function scrollThis(event, delta, deltaX, deltaY) {
    var timeNow = new Date().getTime();

    // change this to deltaX/deltaY depending on which
    // scrolling dir you want to capture
    deltaOfInterest = deltaY;

    if (deltaOfInterest == 0) {
        // Uncomment if you want to use deltaX
        // event.preventDefault();
        return;
    }

    // Cancel scroll if currently animating or within quiet period
    if(timeNow - lastAnimation < quietPeriod + animationTime) {
        event.preventDefault();
        return;
    }

    if (deltaOfInterest < 0) {
        if ($('.active').next('div').length) {
            lastAnimation = timeNow;
            $('.active').removeClass('active').next('div').addClass('active');
            $('html,body').animate( {
                scrollTop: $('.active').offset().top }, animationTime);
        }
    } else {
        if ($('.active').prev('div').length) {
            lastAnimation = timeNow;
            $('.active').removeClass('active').prev('div').addClass('active');
            $('html,body').animate( {
                scrollTop: $('.active').offset().top }, animationTime);
        }
    }
}

// Note: mousewheel() is defined in the mousewheel plugin by Brandon Aaron
// You could do without it, but you'd need to adjust for firefox and webkit
// separately.
//
// You couldn't use $(document).scroll() because it doesn't allow you to
// preventDefault(), which I use here.
$(document).mousewheel(scrollThis);

我还包括quietPeriod超出动画时间的时间,在此期间你想继续忽略mousescroll事件.如果希望动画完成后滚动"响应",则可以将其设置为0.