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.
