jQuery.mousewheel: обработка событий колеса мыши

В данной статье мы будем пользоваться jquery.mousewheel.

Для того, чтобы обработать событие скролла, необходимо повесить listener на определённый элемент:

$('#wrapper')
   .mousewheel(function (event, delta) {
      //code
   })
;

Пример — как обработать скролл — делаем горизонтальную прокрутку блока при вращении колёсика мыши:

$('#photo-wrapper')
   .data('scrollLeft', -1) //для предотвращения блокировки вертикального скролла
   .mousewheel(function (event, delta) {
      if ( (!this.scrollLeft && delta > 0) || (this.scrollLeft == $(this).data('scrollLeft') && delta < 0) ) {
         return true; //данный блок необходим для того, чтобы перестать блокировать вертикальный скролл, если горизонтальный закончился
      }
      
      $(this).data('scrollLeft', this.scrollLeft); //сохраняем текущий скролл слева
      
      this.scrollLeft -= (delta * 300); //на сколько прокрутить блок? (размер скролла)
      return false; //отключить вертикальный
   })
;