jQuery настройка плагинов колесика мыши

Question

У меня полноэкранный слайдер и вы хотите включить навигацию с помощью колеса мыши. Чтобы обнаружить событие с колесиком мыши, я подумал, что оптимальным вариантом является плагин jQuery mousewheel.

Я могу включить его и функции огня. Но я не могу (и не нашел никаких ресурсов), чтобы настроить его так, как я хочу.

Я хочу проверить наличие определенного количества прокрученных пикселей. Итак, если, например, колесо мыши попытается прокрутить 20px up, я хочу запустить функцию, или 20px down для другой функции.

​$(document).ready(function(){ 
    $('body').bind('mousewheel', function(e){ 
     if(e.originalEvent.wheelDelta /120 > 0) { 
      alert('Wait! I fire way too often!'); 
     } 
     else{ 
      alert('We are going down, way too msuch alerts!'); 
     } 
    }); 
}); 

JS FIDDLE (Прокрутка вверх/вниз)

Answer 1

Если я правильно понимаю вашу проблему правильно, вы видите огонь события слишком часто. Проблема здесь в том, что для любого заданного действия прокрутки событие срабатывает несколько раз. Вы можете увидеть это, если открыть консоль разработчика в своем браузере и сделать console.log(e.originalEvent.wheelDelta). Это может сломать большой свиток на несколько небольших событий прокрутки, отбросив ваше желаемое поведение. Путь я обращался с этим было использовать переменную для прокрутки дельта:

$(document).ready(function(){ 
    var scrollPixels = 0; // variable to store scroll delta 

    $('body').bind('mousewheel', function(e){ 
     // increment/decrement scroll delta 
     scrollPixels += e.originalEvent.wheelDelta; 
     console.log(scrollPixels); 

     if (scrollPixels < -20) { 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming down!'); 
     } 
     else if (scrollPixels > 20){ 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming up!'); 
     } 
    }); 
}); 

Вы можете очистить дельту прокрутки после вверх или вниз предупреждения пожаров.

JS Fiddle

Вы также можете увеличить свой тест на более чем 20 пикселей, поскольку большинство свитков будет срабатывать это событие - 20 пикселей составляет лишь около 1/4 дюйма.

Надеюсь, что это поможет. Если это не исправить вашу проблему, не стесняйтесь комментировать, где я ошибся. Удачи!

---

Обновление адреса комментарий:

Вы можете подождать, пока свиток не останавливается, установив тайм-аут, который будет ждать короткий промежуток времени (250 мс в данном примере) после того, как скроллинг прекратил выполнение. Я переехал логику в этом тайм-аут, так что он будет работать только после того, как скроллинг остановился:

$(document).ready(function(){ 
    var scrollPixels = 0; // variable to store scroll delta 
    var scrolling; // timeout function var 

    $('body').bind('mousewheel', function(e){ 
     // increment/decrement scroll delta 
     scrollPixels += e.originalEvent.wheelDelta; 
     console.log(scrollPixels); 

     clearTimeout(scrolling); 
     scrolling = setTimeout(function() { 
     console.log('stop wheeling! ', scrollPixels); 
     scrolling = undefined; 

     if (scrollPixels < -300) { 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming down!'); 
     } 
     else if (scrollPixels > 300){ 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming up!'); 
     } 

    }, 250); 
    }); 
}); 

Обновлено JS Fiddle