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.

4 Commenti

  1. Matteo Delia mercoledì 29 agosto 2018 alle ore 17.49

    Ciao Michele
    Sto attingendo a questo tuo script per il mio sito cercando di apportarne delle modifiche. Voglio che lo scroll del mouse su una foto mi cambi foto, ho modificato il tuo script di conseguenza:
    var contatore = 0;

    $("#text_container").mousewheel(function(ev, val){
    if (val > 0){
    contatore = contatore + 1;
    }
    else if (val < 0){
    contatore = contatore - 1;
    }
    else if (contatore = 0){
    $("#text_container").html('

    ');
    }
    else if (contatore = 1){
    $("#text_container").html('
    ');
    }
    else if (contatore = 2){
    $("#text_container").html('
    ');
    }
    });

    Ma scrollando sull'immagine non avviene nulla, potresti darmi una mano?

    Rispondi a questo commento
  2. Matteo Delia mercoledì 29 agosto 2018 alle ore 17.52

    Anzi, il mio script esatto è il seguente:

    var contatore = 0;

    $("#text_container").mousewheel(function(ev, val){
    else if (contatore = 0){
    $("#text_container").html('

    ');
    }
    else if (contatore = 1){
    $("#text_container").html('
    ');
    }
    else if (contatore = 2){
    $("#text_container").html('
    ');
    }
    });

    Rispondi a questo commento
    • Matteo Delia mercoledì 29 agosto 2018 alle ore 18.08

      Nel commento non mostra cosa c'é tra parentesi: ho semplicemente inserito ad ogni contenitore con diverso numero lo stesso div="tex_container" modificando al suo interno il file img a cui si riferisce.
      Scusami per i tre commenti di fila

      Rispondi a questo commento
      • Michele PisaniAutore lunedì 3 settembre 2018 alle ore 12.10

        Ciao Matteo,
        per caso hai visto se in console ti viene restituito qualche errore? Questo può scongiurare eventuali anomalie nel codice.
        Per agevolare le attività di controllo e di test potresti preparare un JSFiddle con il tuo codice effettivo in modo da poter verificare dal vivo la situazione attuale reale? Grazie.

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 Antimo, il momento in cui è possibile annullare l'operazione di unione delle pagine è quello …

Antimo Cusano

Ciao Michele, sai dirmi se c'è un modo per annullare una richiesta di unione di pagine doppie …

Michele Pisani

Grazie a te per il feedback, anch'io a suo tempo ci ho sbattuto un po' la testa prima di arrivare …

Giusy

Grazie, fortunatamente ho trovato il tuo articolo... differentemente non ne sarei mai uscita :)