MICHELEPISANI.IT

I plugins di jQuery più utilizzati nel web

Come intercettare l'evento scaturito dal movemento della rotella del mouse

Gestire la rotella del mouse con jquery.mousewheel.js

Agosto 10
07:022014

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;
    }
};


L'HTML del mio esempio:
<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>');
    }
});


Il JSFiddle seguente ne mostra il funzionamento live, provate pertanto a selezionare il tab "Result" e scorrere la rotella del mouse nell'area grigia indicata per vedere come l'evento viene intercettato.



Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao stefy,
la tua domanda non è proprio pertinente a questo articolo... ti consiglio di dare …

stefy

salve. ho un problema sulla pagina facebook..non riesco a unirla..mi dice che è in sospeso …

Michele

Ciao Antonio,
ma il tuo apk si chiama 'HelloWorld-release-unsigned.apk'?