Bildlaufrichtung erkennen

118

Ich versuche also, mit JavaScript on scrolleine Funktion aufzurufen. Aber ich wollte wissen, ob ich die Richtung der Schriftrolle ohne jQuery erkennen kann. Wenn nicht, gibt es dann Problemumgehungen?

Ich dachte daran, nur einen "Nach oben" -Knopf zu drücken, möchte dies aber vermeiden, wenn ich könnte.

Ich habe gerade versucht, diesen Code zu verwenden, aber es hat nicht funktioniert:

if document.body.scrollTop <= 0 {
    alert ("scrolling down")
} else {
    alert ("scrolling up")
}
Dwinnbrown
quelle
Es ist wheelDeltadas Ereignis. Ganz und gar nicht browserübergreifend. Siehe phrogz.net/js/wheeldelta.html
marekful
1
hmmm nicht ganz das, wonach ich gesucht habe, aber ich schätze Ihre Hilfe: P Irgendwelche anderen Vorschläge?
Dwinnbrown

Antworten:

175

Sie können dies erkennen, indem Sie den vorherigen scrollTopWert speichern und den aktuellen scrollTop-Wert damit vergleichen.

JavaScript:

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop){
      // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
Prateek
quelle
19
Es wäre sicherer, lastScrollTopauf pageYOffset || zu initialisieren scrollTop anstatt 0 anzunehmen
Ed Ballot
Stimme voll und ganz zu !! Danke @EdBallot. Wir sollten dasselbe Ereignis bei window.onload initialisieren.
Prateek
@Prateek Danke für deine Antwort, aber es funktioniert nicht für mich ... Ich versuche, die Szene in meiner Webapp zu ändern, die mit Tumult Hype erstellt wurde.
Dwinnbrown
Ich habe in meiner Antwort einige Kommentare hinzugefügt, bitte überprüfen Sie es. Ich denke, Sie verwenden "element.addEventListener".
Prateek
@Prateek noch nichts, fürchte ich. Könnte es daran liegen, dass ich es beim Laden der Seite ausführe? Hier ist ein Screenshot: i.imgur.com/Q0H0T4s.png
Dwinnbrown
53

Einfache Möglichkeit, alle Bildlaufereignisse (Berührung und Rad) zu erfassen

window.onscroll = function(e) {
  // print "false" if direction is down and "true" if up
  console.log(this.oldScroll > this.scrollY);
  this.oldScroll = this.scrollY;
}
IT VLOG
quelle
10
Willkommen bei SO. Wenn Sie Ihrer Antwort eine Beschreibung hinzufügen, kann dies für das OP und andere hilfreich sein.
Alejandro Montilla
32

Verwenden Sie diese Option, um die Bildlaufrichtung zu ermitteln. Dies dient nur zum Ermitteln der Richtung der vertikalen Schriftrolle. Unterstützt alle Cross-Browser.

var scrollableElement = document.body; //document.getElementById('scrollableElement');

scrollableElement.addEventListener('wheel', checkScrollDirection);

function checkScrollDirection(event) {
  if (checkScrollDirectionIsUp(event)) {
    console.log('UP');
  } else {
    console.log('Down');
  }
}

function checkScrollDirectionIsUp(event) {
  if (event.wheelDelta) {
    return event.wheelDelta > 0;
  }
  return event.deltaY < 0;
}

Beispiel

Vasi
quelle
2
Das ist gut, scheint aber nur für die Verwendung des Scrollrads zu funktionieren
Jonathan.Brink
1
Von MDN-Webdocs: Hinweis: Verwechseln Sie das Wheel-Ereignis nicht mit dem Scroll-Ereignis. Die Standardaktion eines Radereignisses ist implementierungsspezifisch und löst nicht unbedingt ein Bildlaufereignis aus. Selbst wenn dies der Fall ist, spiegeln die Delta * -Werte im Wheel-Ereignis nicht unbedingt die Bildlaufrichtung des Inhalts wider. Verlassen Sie sich daher nicht auf die Delta * -Eigenschaften des Radereignisses, um die Bildlaufrichtung zu erhalten. Erkennen Sie stattdessen Wertänderungen von scrollLeft und scrollTop des Ziels im Bildlaufereignis. developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
Battaboombattabaam
10

Sie können dies versuchen.

function scrollDetect(){
  var lastScroll = 0;

  window.onscroll = function() {
      let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value

      if (currentScroll > 0 && lastScroll <= currentScroll){
        lastScroll = currentScroll;
        document.getElementById("scrollLoc").innerHTML = "Scrolling DOWN";
      }else{
        lastScroll = currentScroll;
        document.getElementById("scrollLoc").innerHTML = "Scrolling UP";
      }
  };
}


scrollDetect();
html,body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}

.cont{
  height:100%;
  width:100%;
}

.item{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  background: #ffad33;
}

.red{
  background: red;
}

p{
  position:fixed;
  font-size:25px;
  top:5%;
  left:5%;
}
<div class="cont">
  <div class="item"></div>
  <div class="item red"></div>
  <p id="scrollLoc">0</p>
</div>

davecar21
quelle
Das funktioniert bei mir nicht gut. Wenn ich bis zu einer bestimmten Höhe nach oben scrolle, wird es nach unten angezeigt
Entwickler
8

Dies ist eine Ergänzung zu dem, was prateek beantwortet hat. Es scheint einen Fehler im Code im IE zu geben, also habe ich beschlossen, ihn ein wenig zu ändern, nichts Besonderes (nur eine andere Bedingung)

$('document').ready(function() {
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       console.log("down")
   }
   else if(st == lastScrollTop)
   {
     //do nothing 
     //In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one
   }
   else {
      console.log("up")
   }
   lastScrollTop = st;
});});
Emmanuell
quelle
1
Vielen Dank für Ihren Hinweis ... dies scheint mit der IE-Option "Smooth Scrolling" verbunden zu sein
Kristo
5
  1. Initialisieren Sie einen alten Wert
  2. Holen Sie sich den neuen Wert, indem Sie das Ereignis anhören
  3. Subtrahieren Sie die beiden
  4. Schließen Sie aus dem Ergebnis
  5. Aktualisieren Sie oldValue mit dem newValue

// Initialisierung

let oldValue = 0;

// Das Ereignis abhören

window.addEventListener('scroll', function(e){

    // Get the new Value
    newValue = window.pageYOffset;

    //Subtract the two and conclude
    if(oldValue - newValue < 0){
        console.log("Up");
    } else if(oldValue - newValue > 0){
        console.log("Down");
    }

    // Update the old value
    oldValue = newValue;
});
thewebjackal
quelle
3

Sie können die Position der Bildlaufleiste mit abrufen document.documentElement.scrollTop. Und dann geht es einfach darum, es mit der vorherigen Position zu vergleichen.

Igal S.
quelle
Ok und könnte ich das noch auf einer Website verwenden, die traditionell kein Scrollen zulässt (dh es passt zu 100% Breite und Höhe des Browsers. Danke
Dwinnbrown
2

Dieser einfache Code würde funktionieren: Überprüfen Sie die Konsole auf Ergebnisse.

let scroll_position = 0;
let scroll_direction;

window.addEventListener('scroll', function(e){
    scroll_direction = (document.body.getBoundingClientRect()).top > scroll_position ? 'up' : 'down';
    scroll_position = (document.body.getBoundingClientRect()).top;
    console.log(scroll_direction);
});
Usman Ahmed
quelle
1

Ich persönlich benutze diesen Code, um die Bildlaufrichtung in Javascript zu erkennen ... Sie müssen nur eine Variable definieren, um den letzten Bildlaufwert zu speichern, und diese dann verwenden, wenn & else

let lastscrollvalue;

function headeronscroll() {

    // document on which scroll event will occur
    var a = document.querySelector('.refcontainer'); 

    if (lastscrollvalue == undefined) {

        lastscrollvalue = a.scrollTop;

        // sets lastscrollvalue
    } else if (a.scrollTop > lastscrollvalue) {

        // downscroll rules will be here
        lastscrollvalue = a.scrollTop;

    } else if (a.scrollTop < lastscrollvalue) {

        // upscroll rules will be here
        lastscrollvalue = a.scrollTop;

    }
}
WagonWolf
quelle
0

Einfacher Code

// Events
$(document).on('mousewheel DOMMouseScroll', "element", function(e) {
    let delta = e.originalEvent.wheelDelta;
    
    if (delta > 0 || e.originalEvent.detail < 0) upScrollFunction();
    if (delta < 0 || e.originalEvent.detail > 0) donwScrollFunction();
}
Ricardo Schmidt
quelle
Während dieser Code die Frage möglicherweise beantwortet, würde die Bereitstellung eines zusätzlichen Kontexts darüber, wie und / oder warum das Problem gelöst wird, den langfristigen Wert der Antwort verbessern.
Donald Duck