web-dev-qa-db-fra.com

Comment déterminer la direction de défilement sans faire défiler

Je suis en train de coder une page sur laquelle la première fois que l'utilisateur fait défiler, il ne fait pas défiler la page vers le bas, mais ajoute une classe avec une transition. J'aimerais détecter le moment où l'utilisateur fait défiler l'écran, car s'il le fait défiler vers le haut, je veux qu'il fasse autre chose . Toutes les méthodes que j'ai trouvées reposent sur la définition du corps actuel ScrollTop, puis en comparant avec le corps scrollTop après le défilement de la page, en définissant la direction, mais puisque la page ne défile pas réellement, le corps scrollTop () ne change pas.

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

    }


});

C’est ce que j’ai fait, mais peu importe la direction dans laquelle je fais défiler déclenche l’événement

javascriptjqueryscroll
26
Daniel Ortiz

L'événement mousewheel devient rapidement obsolète. Vous devriez utiliser wheel à la place.

Cela vous permettrait également de choisir facilement la direction de défilement verticale et horizontale sans barres de défilement.

Cet événement est pris en charge par tous les principaux navigateurs actuels et devrait rester la norme dans le futur.

Voici une démo:

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>

44
www139

Essayez ceci avec addEventListener.

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

Démo

Mettre à jour:

Comme mentionné dans l'une des réponses, l'événement mousewheel est amorti. Vous devriez plutôt utiliser l'événement wheel.

18
cracker

Essayez d'utiliser 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);

    }


});

Remarque: rappelez-vous que MouseWheel est obsolète et n'est pas pris en charge dans FireFox.

3
user3719477

Testé sur chrome et 

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

    if (e.originalEvent.deltaY >= 0) {
        console.log('Scroll up'); //your scroll data here
    }
    else {
        console.log('Scroll down'); //your scroll data here
    }

});
0
Yoannes Geissler

celui-ci fonctionne dans l'application de réaction 

<p onWheel={this.onMouseWheel}></p>

après avoir ajouté un écouteur d’événements, vous pouvez utiliser deltaY pour capturer la molette de la souris. 

onMouseWheel = (e) => {
 e.deltaY > 0 
   ? console.log("Down")
   : console.log("up")
}
0
sajad saderi