Bildlaufrichtung erkennen

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")
}

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

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

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

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>

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

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

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.

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

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;

    }
}

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