Jak określić kierunek przewijania bez rzeczywistego przewijania

Question

Koduję stronę, na której użytkownik przewija się po raz pierwszy, w rzeczywistości nie przewija strony, zamiast tego dodaje klasę z przejściem. Chciałbym wykryć, kiedy użytkownik przewija w dół, ponieważ jeśli przewija w górę, chcę, aby zrobił coś innego. Wszystkie znalezione przeze mnie metody opierają się na zdefiniowaniu bieżącego ciała ScrollTop, a następnie porównaniu z treścią scrollTop po przewinięciu strony, definiując kierunek, ale ponieważ strona faktycznie nie jest przewijana, ciało scrollTop() doesn się nie zmieni.

animationIsDone = false; 

function preventScroll(e) { 

    e.preventDefault(); 
    e.stopPropagation(); 
} 

$('body').on('mousewheel', function(e) { 

    if (animationIsDone === false) { 
     $("#main-header").removeClass("yellow-overlay").addClass("yellow-overlay-darker"); 
     $(".site-info").first().addClass("is-description-visible"); 
     preventScroll(e); 

     setTimeout(function() { 
      animationIsDone = true; 
     }, 1000); 

    } 


}); 

To jest to, co ja przyszedłem z, ale w ten sposób nie ma znaczenia kierunek przewijać wyzwala zdarzenie

Answer 1

Zdarzenie mousewheel szybko staje się przestarzałe. Zamiast tego należy użyć wartości wheel.

Umożliwia to również łatwy dostęp do pionowego i/lub poziomego kierunku przewijania bez pasków przewijania.

To wydarzenie ma wsparcie we wszystkich obecnych głównych przeglądarkach i powinno pozostać standardem daleko w przyszłości.

Oto demo:

window.addEventListener('wheel', function(e) { 
 
    if (e.deltaY < 0) { 
 
    console.log('scrolling up'); 
 
    document.getElementById('status').innerHTML = 'scrolling up'; 
 
    } 
 
    if (e.deltaY > 0) { 
 
    console.log('scrolling down'); 
 
    document.getElementById('status').innerHTML = 'scrolling down'; 
 
    } 
 
});

<div id="status"></div>

Answer 2

Spróbuj użyć e.wheelDelta

var animationIsDone = false, scrollDirection = 0; 

function preventScroll(e) { 

    e.preventDefault(); 
    e.stopPropagation(); 
} 

$('body').on('mousewheel', function(e) { 

    if (e.wheelDelta >= 0) { 
     console.log('Scroll up'); //your scroll data here 
    } 
    else { 
     console.log('Scroll down'); //your scroll data here 
    } 
    if (animationIsDone === false) { 
     $("#main-header").removeClass("yellow-overlay").addClass("yellow-overlay-darker"); 
     $(".site-info").first().addClass("is-description-visible"); 
     preventScroll(e); 

     setTimeout(function() { 
      animationIsDone = true; 
     }, 1000); 

    } 


}); 

Uwaga: Pamiętaj, że kółka myszy jest przestarzałe i nie jest obsługiwane w FireFox

Answer 3

Wypróbuj za pomocą addEventListener.

window.addEventListener('mousewheel', function(e){ 
    wDelta = e.wheelDelta < 0 ? 'down' : 'up'; 
    console.log(wDelta); 
}); 

Demo

Aktualizacja:

Jak wspomniano w jednym z udzielonych odpowiedzi mouseWheel zdarzenie jest amortyzowane. Zamiast tego powinieneś użyć zdarzenia koła.