Gestire la rotella del mouse con jquery.mousewheel.js

Il plugin per jQuery denominato Mouse Wheel, scaricabile dal sito di Brandon Aaron scaricabile dal suo sito web, permette di gestire tramite Javascript i movimenti della rotella del mouse (ove presente).

Il plugin funziona associando ad un elemento l'evento generato dal movimento della rotella del mouse che sarà successivamente normalizzato data la natura dei valori incostanti generati da tale movimento garantendone inoltre la compatibilità cross-browser. Questo tipo di plugin può essere utile per scorrere presentazioni online, slider di immagini, creare effetti di parallasse e tutto ciò che di consueto può essere solitamente e più comodamente effettuato con la rotella del mouse piuttosto che con un click o con la tastiera.

Di seguito riporto il codice di un piccolo esempio che ho creato giusto per mostrare come poter utilizzare questo plugin di jQuery, dopodochè da questa base potrete sbizzarrirvi ed apportare migliorie e funzioalità per l'integrazione nei vostri siti o applicazioni web-based.

Il codice del plugin:

jQuery.fn.extend({
  mousewheel: function(up, down, preventDefault) {
  return this.hover(
  function() {
    jQuery.event.mousewheel.giveFocus(this, up, down, preventDefault);
  },
  function() {
    jQuery.event.mousewheel.removeFocus(this);
    }
  );
  },
    mousewheeldown: function(fn, preventDefault) {
    return this.mousewheel(function(){}, fn, preventDefault);
  },
    mousewheelup: function(fn, preventDefault) {
    return this.mousewheel(fn, function(){}, preventDefault);
  },
  unmousewheel: function() {
    return this.each(function() {
    jQuery(this).unmouseover().unmouseout();
    jQuery.event.mousewheel.removeFocus(this);
    });
  },
  unmousewheeldown: jQuery.fn.unmousewheel,
  unmousewheelup: jQuery.fn.unmousewheel
});

jQuery.event.mousewheel = {
  giveFocus: function(el, up, down, preventDefault) {
  if (el._handleMousewheel) jQuery(el).unmousewheel();
		
    if (preventDefault == window.undefined && down && down.constructor != Function) {
      preventDefault = down;
      down = null;
    }
		
    el._handleMousewheel = function(event) {
    if (!event) event = window.event;
    if (preventDefault)
    if (event.preventDefault) event.preventDefault();
  else event.returnValue = false;
    var delta = 0;
    if (event.wheelDelta) {
      delta = event.wheelDelta/120;
      if (window.opera) delta = -delta;
      } else if (event.detail) {
        delta = -event.detail/3;
      }
      if (up && (delta > 0 || !down))
        up.apply(el, [event, delta]);
      else if (down && delta < 0)
        down.apply(el, [event, delta]);
    };
		
    if (window.addEventListener)
      window.addEventListener('DOMMouseScroll', el._handleMousewheel, false);
      window.onmousewheel = document.onmousewheel = el._handleMousewheel;
    },
	
    removeFocus: function(el) {
      if (!el._handleMousewheel) return;
		
      if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', el._handleMousewheel, false);
        window.onmousewheel = document.onmousewheel = null;
        el._handleMousewheel = null;
    }
};

<div id="scroll_area">
    <div id="text_container">Usa la rotella del mouse in questo blocco</div>
</div>

Il codice CSS dell'esempio:

#scroll_area {width: 200px; height: 200px; background-color: #ccc; border: solid 1px #333;text-align:center;}
#text_container {width:200px;height:50px;margin-top:75px;}

La mia funzione Javascript che si allaccia al plugin per gestire l'evento:

// Funzione personalizzata per assegnare il comportamento allo scroll della rotella del mouse

var contatore = 0;

$("#scroll_area").mousewheel(function(ev, val){
    if (val > 0){
        contatore = contatore + 1;
        $("#scroll_area").html('<div id="text_container">scroll verso l'alto<br />posizione scatto: ' + contatore + '</div>');
    }
    else if (val < 0){
        contatore = contatore - 1;
        $("#scroll_area").html('<div id="text_container">scroll verso il basso<br />posizione scatto: ' +  contatore + '</div>');
    }
});