Wie kann ich die Richtung eines jQuery Scroll-Ereignisses bestimmen?

Question

Ich bin auf der Suche nach etwas in dieser Richtung:

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

Irgendwelche Ideen?

Answer 1

Wenn Sie nur wissen wollen, ob Sie mit einem Zeigergerät (Maus oder Trackpad) nach oben oder unten scrollen, können Sie die Funktion deltaY Eigenschaft der wheel evento.

$('.container').on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
    $('.result').append('Scrolled down!<br>');
  } else {
    $('.result').append('Scrolled up!<br>');
  }
});

.container {
  height: 200px;
  width: 400px;
  margin: 20px;
  border: 1px solid black;
  overflow-y: auto;
}
.content {
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    Scroll me!
  </div>
</div>

<div class="result">
  <p>Action:</p>
</div>

Answer 2

Ereignis blättern

En Scroll-Ereignis verhält sich seltsam in FF (es ist eine Menge Zeit wegen der Glätte Scrollen gefeuert), aber es funktioniert.

Anmerkung: Die Blättern Sie Veranstaltung tatsächlich wird gefeuert beim Ziehen der Bildlaufleiste mit den Cursortasten oder dem Mausrad.

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log(" End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

---

Rad-Veranstaltung

Sie können auch einen Blick auf MDN werfen, dort finden Sie eine Vielzahl von Informationen über die Rad-Veranstaltung .

Anmerkung: Das Rad-Ereignis wird nur bei Verwendung des Mausrads ausgelöst Die Cursortasten und das Ziehen der Bildlaufleiste lösen das Ereignis nicht aus.

Ich habe das Dokument und das Beispiel gelesen: _Anhören dieses Ereignisses über den Browser_
und nach einigen Tests mit FF, IE, Chrome und Safari habe ich dieses Snippet erhalten:

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});

Answer 3

Aktualisierung 2021-04-07

Bobort in einem Kommentar (danke!) auf den neuen Hinweis in der Raddokumentation :

Verwechseln Sie das Rad-Ereignis nicht mit dem Bildlauf-Ereignis. Die Standardaktion eines Rad-Ereignisses ist implementierungsspezifisch und löst nicht unbedingt ein Scroll-Ereignis aus. Selbst wenn dies der Fall ist, wird das delta*-Werte im Rad-Ereignis spiegeln nicht unbedingt die Bildlaufrichtung des Inhalts wider . Verlassen Sie sich daher nicht auf die delta*-Eigenschaften des Rad-Ereignisses, um die Bildlaufrichtung zu ermitteln. Erkennen Sie stattdessen Wertänderungen von scrollLeft und scrollTop des Ziels im Scroll-Ereignis.

Das in der Dokumentation angegebene Beispiel verwendet jedoch die Skalierung delta, was ein Hochrollen für das Herauszoomen und ein Herunterrollen für das Hereinzoomen impliziert.

Der nachstehende Code funktionierte bei mir in verschiedenen Browsern, um die Richtung zu erkennen, aber angesichts dieses Hinweises sollten Sie ihn auf eigene Gefahr verwenden.

Ursprüngliche Antwort

Desde bind ist veraltet zu v3 ("ersetzt durch on ") und wheel wird jetzt unterstützt , vergessen wheelDelta :

$(window).on('wheel', function(e) {
  if (e.originalEvent.deltaY > 0) {
    console.log('down');
  } else if (e.originalEvent.deltaY < 0) {
    console.log('up');
  } else if (e.originalEvent.deltaX > 0) {
    console.log('right');
  } else if (e.originalEvent.deltaX < 0) {
    console.log('left');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</h1>

wheel der Veranstaltung Browser-Kompatibilität auf MDN's (2019-03-18) :

Answer 4

var tempScrollTop, currentScrollTop = 0; 

$(window).scroll(function(){ 

   currentScrollTop = $("#div").scrollTop(); 

   if (tempScrollTop > currentScrollTop ) {
       // upscroll code
   }
  else if (tempScrollTop < currentScrollTop ){
      // downscroll code
  }

  tempScrollTop = currentScrollTop; 
} 

oder verwenden Sie die Mausrad-Erweiterung siehe aquí .

Answer 5

Sie können die Richtung der Mauszeiger bestimmen.

$(window).on('mousewheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta ? 
                   e.originalEvent.wheelDelta : -e.originalEvent.detail;

    if (delta >= 0) {
        console.log('scroll up');
    } else {
        console.log('scroll down');
    }
});