Czy można użyć metody Window.Onscroll, aby uwzględnić wykrywanie kierunku przewijania?

Question

Czy można użyć metody Window.Onscroll, aby uwzględnić wykrywanie kierunku przewijania?

Answer 1

Jeśli podczas przewijania strony i przewijania Y na stronie ładuje się i za każdym razem, gdy wystąpi zdarzenie przewijania, można porównać poprzednie wartości z nowymi wartościami, aby wiedzieć, który kierunek przewijał. Oto dowód pojęcia:

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

miałem problemy podejmowania tej pracy w IE8 (choć jest on zgodny z IE9, FF i Chrome) - wszystkie zwoje wydają się być wykrywany jako poziomy.

Oto zmodyfikowany skrypt demo, który działa również w wersji ie8 i może obejmować kilka innych przeglądarek.

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

z jQuery, można również rejestrować zdarzenia niestandardowe przewijania, który dostarcza zmianę przewijania jako argument do obsługi zdarzenia:

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]); 
}); 

Wtedy zamiast scroll, wiążą się custom_scroll:

$(window).on('custom_scroll', function pos(e, scroll_change) { 
    console.log(scroll_change); 
});