it-swarm.com.de

So bestimmen Sie die Bildlaufrichtung, ohne tatsächlich zu scrollen

Ich codiere eine Seite, auf der der Benutzer beim ersten Scrollen die Seite nicht nach unten scrollen kann, sondern eine Klasse mit einem Übergang hinzugefügt wird. Ich möchte erkennen, wenn der Benutzer nach unten scrollt, denn wenn er nach oben scrollen soll, möchte ich, dass er etwas anderes tut. Alle Methoden, die ich gefunden habe, basieren auf der Definition des aktuellen Hauptteils ScrollTop. und dann mit dem body scrollTop vergleichen, nachdem die Seite gescrollt wurde, um die Richtung festzulegen, aber da die Seite nicht wirklich scrollt, ändert sich der body scrollTop () nicht.

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

    }


});

Ich bin mitgekommen, aber auf diese Weise spielt es keine Rolle, in welche Richtung ich scrolle, es löst das Ereignis aus

26
Daniel Ortiz

Das mousewheel-Ereignis wird schnell veraltet. Sie sollten stattdessen wheel verwenden.

Auf diese Weise können Sie auch leicht die vertikale und/oder horizontale Bildlaufrichtung ohne Bildlaufleisten anzeigen.

Dieses Ereignis wird in allen gängigen Browsern unterstützt und sollte auch in Zukunft Standard bleiben.

Hier ist eine 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>

44
www139

Versuchen Sie dies mit addEventListener.

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

Demo

Update:

Wie in einer der Antworten erwähnt, wird das Ereignis mousewheel abgeschrieben. Sie sollten stattdessen das Radereignis verwenden.

18
cracker

Versuchen Sie es mit 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);

    }


});

Hinweis: Beachten Sie, dass MouseWheel veraltet ist und in FireFox nicht unterstützt wird

3
user3719477

Ich weiß, dass dieser Beitrag von vor 5 Jahren stammt, aber ich habe keine gute Jquery-Antwort gesehen (die .on('mousewheel') funktioniert bei mir nicht ...)

Einfache Antwort mit jquery und Verwendung von window anstelle von body, um sicherzustellen, dass Sie das Scroll-Ereignis ausführen:

$(window).on('wheel', function(e) {
    var scroll = e.originalEvent.deltaY < 0 ? 'up' : 'down';
    console.log(scroll);
});
0
NoxFly

Getestet auf Chrom und 

$('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

diese arbeiten in reagieren app 

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

nach dem Hinzufügen eines Ereignis-Listeners können Sie in der Funktion deltaY verwenden, um das Mausrad zu erfassen 

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