Peut-on utiliser la méthode Window.Onscroll pour inclure la détection de la direction de défilement?

Question

Peut-on utiliser la méthode Window.Onscroll pour inclure la détection de la direction de défilement?

Answer 1

Si vous enregistrez le scrollX et défilez à la page de chargement et chaque fois qu'un événement de défilement se produit, vous pouvez comparer les valeurs précédentes avec les nouvelles valeurs pour savoir dans quelle direction vous avez défilé. Voici une preuve de concept:

function scrollFunc(e) { 
    if (typeof scrollFunc.x == 'undefined') { 
     scrollFunc.x=window.pageXOffset; 
     scrollFunc.y=window.pageYOffset; 
    } 
    var diffX=scrollFunc.x-window.pageXOffset; 
    var diffY=scrollFunc.y-window.pageYOffset; 

    if(diffX<0) { 
     // Scroll right 
    } else if(diffX>0) { 
     // Scroll left 
    } else if(diffY<0) { 
     // Scroll down 
    } else if(diffY>0) { 
     // Scroll up 
    } else { 
     // First scroll event 
    } 
    scrollFunc.x=window.pageXOffset; 
    scrollFunc.y=window.pageYOffset; 
} 
window.onscroll=scrollFunc 

Answer 2

J'ai eu du mal à faire ce travail dans IE8 (bien qu'il soit conforme pour IE9, FF et Chrome) - tous les rouleaux semblent être détectés comme horizontale.

Voici un script modifié demo qui fonctionne également dans IE8 et peut couvrir un peu plus de navigateurs.

function scrollFunc(e) { 

    function getMethod() { 
     var x = 0, y = 0; 
     if (typeof(window.pageYOffset) == 'number') { 
      x = window.pageXOffset; 
      y = window.pageYOffset; 
     } 

     else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { 
      x = document.body.scrollLeft; 
      y = document.body.scrollTop; 
     } 

     else if(document.documentElement && (document.documentElement.scrollLeft ||  document.documentElement.scrollTop)) { 
      x = document.documentElement.scrollLeft; 
      y = document.documentElement.scrollTop; 
     } 

     return [x, y]; 
    } 

    var xy = getMethod();    
    var xMethod = xy[0];   
    var yMethod = xy[1]; 

    if (typeof scrollFunc.x == 'undefined') { 
     scrollFunc.x = xMethod; 
     scrollFunc.y = yMethod; 
    } 

    var diffX = scrollFunc.x - xMethod; 
    var diffY = scrollFunc.y - yMethod; 


    if(diffX<0) { 
     // Scroll right 
    } else if(diffX>0) { 
     // Scroll left 
    } else if(diffY<0) { 
     // Scroll down 
    } else if(diffY>0) { 
     // Scroll up 
    } else { 
     // First scroll event 
    } 
    scrollFunc.x = xMethod; 
    scrollFunc.y = yMethod; 
} 

window.onscroll=scrollFunc​ 

Answer 3

Avec jquery, vous pouvez également enregistrer un événement de défilement personnalisé qui fournit le changement de défilement comme argument au gestionnaire d'événements:

var previous_scroll = $(window).scrollTop(); 

$(window).on('scroll', function() { 
    var scroll = $(window).scrollTop(), 
     scroll_change = scroll - previous_scroll; 
    previous_scroll = scroll; 
    $(window).trigger('custom_scroll', [scroll_change]); 
}); 

Ensuite, au lieu de scroll, se lient à custom_scroll: