BIGtheme.net http://bigtheme.net/ecommerce/opencart OpenCart Templates
Home / Sviluppo Software / Javascript / JQuery, Ecco come gestire lo scroll del mouse in modo semplice

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

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.

Puoi leggere Anche

[Guida] JQuery cos’ è e come funziona

Nella guida di oggi abbiamo voluto parlare di una delle librerie Javascript, più famose al ...