JQuery, Ecco come gestire lo scroll del mouse in modo semplice

0
226

Nell’ articolo di oggi vediamo come gestire l’evento scorrimento UP/DOWN del mouse attraverso la libreria JQuery.

Il primo esempio che vi proponiamo gestisce l’evento scroll UP e scroll DOWN suddiviso in 2 funzioni in modo tale da gestire la compatibilità con tutti i browser.

//Firefox
$('#elem').bind('DOMMouseScroll', function(e){
if(e.originalEvent.detail > 0) {
//scroll down
console.log('Down');
}else {
//scroll up
console.log('Up');
}
//prevent page fom scrolling
return false;
});


//IE, Opera, Safari
$('#elem').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
console.log('Down');
}else {
//scroll up
console.log('Up');
}
//prevent page fom scrolling
return false;
});

Il Secondo esempio utilizza la funzione jQuery.on ()  ( introdotta da jQuery 1.7 ) il metodo .on ()  è il metodo preferito per gestire gli eventi di un documento.

ATTENZIONE questo esempio  gestira solo lo scroll dell mouse, ma non gestisce il  trackpad funziona su tutti i browser.
$('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) {
//alternative options for wheelData: wheelDeltaX & wheelDeltaY
if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) {
//scroll down
console
.log('Down');
} else {
//scroll up
console
.log('Up');
}
//prevent page fom scrolling
return false;
});

Vedi Esempio: JSFIDDLE.NET 

Per qualsiasi chiarimento fateci sapere.