Использование jQuery для обнаружения прокрутки мыши на один экземпляр, а не за клик

То, что я пытаюсь сделать, это перемещать элемент, пока пользователь прокручивается вверх или вниз. У меня есть механика этого в функции, называемой goTo(). Я также пытаюсь отслеживать, где пользователь использует переменную. Когда пользователь прокручивается вверх или вниз, переменная поднимается или опускается на одну. Эта функция выглядит так:

$(window).on('DOMMouseScroll mousewheel', function(event){

 clearTimeout($.data(this, 'timer')); // NEW CODE 

 $.data(this, 'timer', setTimeout(function() { // NEW CODE

    if( event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0 )
    {
        --curScl;
        goTo(curScl);

    } else {
        ++curScl;
        goTo(curScl);
    }

 }, 250)); // NEW CODE 

});

ОБНОВЛЕНИЕ: По совету @Bart Jedrocha я добавил обертку setTimeout, которая сохраняет значение curSel от skyrocketing с каждым прокруткой. Тем не менее, существует задержка между тем, когда выполняется прокрутка, и когда элемент перемещается. Это очень неестественно. Есть ли способ сделать это без задержки?

Ответы

Ответ 1

Хотя setTimeout работает технически, есть небольшая задержка между тем, когда пользователь прокручивает свою мышь и когда страница прокручивается. Это кажется неестественным и раздражает. Таким образом, мне понадобилось другое решение.

var scl=0; // Create a variable

window.setInterval(function(){
   scl=0; // Reset this variable every 1.5 seconds
}, 1500);

$(window).on('DOMMouseScroll mousewheel', function (e) { 
// Detect movement on the scrollwheel anywhere in browser window

if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {

    while(scl==0) { 
    // Create a while loop that only executes while your variable equals 0

        // CODE HERE            

        scl++; // Make your variable equal 1 after executing once
    }

} else {

    while(scl==0) { 
    // Same deal, but this time while the user scrolls down

       // CODE HERE

        scl++;
    }

}

});

Это кажется без проблем. Если кто-нибудь увидит место, где это можно немного почистить, сообщите мне. Спасибо!

Ответ 2

Если я правильно понимаю, вы пытаетесь увеличить/уменьшить на 1 при остановке события прокрутки. К сожалению, нет события scrollStop, с которым вы можете привязываться. Вы можете использовать setTimeout в вашем обработчике событий, чтобы предотвратить увеличение переменной на каждом тике колеса прокрутки. Посмотрите этот для примера.

Ответ 3

Вы всегда можете проверить системное время, прошедшее с момента последнего вызова события.

var c_time = 0;

$(window).on('DOMMouseScroll mousewheel', function(event){
    if(($.now() - c_time) > 500) //0.5s
    {
        c_time = $.now();
        //Do smthng there...
    }
});