Kaydırma yönünü algılama

Bu yüzden on scrollbir işlevi çağırmak için JavaScript'i kullanmaya çalışıyorum . Ama jQuery kullanmadan kaydırmanın yönünü tespit edip edemeyeceğimi bilmek istedim. Değilse, herhangi bir geçici çözüm var mı?

Sadece bir "yukarı" düğmesi koymayı düşünüyordum, ancak yapabilseydim bundan kaçınmak isterdim.

Şimdi bu kodu kullanmayı denedim ama işe yaramadı:

if document.body.scrollTop <= 0 {
    alert ("scrolling down")
} else {
    alert ("scrolling up")
}

Önceki scrollTopdeğeri saklayarak ve mevcut scrollTop değerini onunla karşılaştırarak tespit edilebilir .

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

Tüm kaydırma olaylarını yakalamanın basit yolu (dokunma ve tekerlek)

window.onscroll = function(e) {
  // print "false" if direction is down and "true" if up
  console.log(this.oldScroll > this.scrollY);
  this.oldScroll = this.scrollY;
}

Kaydırma yönünü bulmak için bunu kullanın. Bu sadece Dikey Kaydırmanın yönünü bulmak içindir. Tüm çapraz tarayıcıları destekler.

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

Misal

Bunu yapmayı deneyebilirsin.

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>

Bu, prateek'in yanıtladığına bir ek. IE'de kodda bir aksaklık var gibi görünüyor, bu yüzden onu biraz değiştirmeye karar verdim (sadece başka bir koşul)

$('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. Eski bir değeri başlatın
2. Etkinliği dinleyerek newValue'u alın
3. İkisini çıkar
4. Sonuçtan sonuca varın
5. OldValue'yu newValue ile güncelleyin

// Başlatma

let oldValue = 0;

// Olayı dinleme

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

Kaydırma çubuğu konumunu kullanarak alabilirsiniz document.documentElement.scrollTop. Ve sonra mesele onu önceki pozisyonla karşılaştırmaktır.

Bu basit kod işe yarardı: Sonuçlar için konsolu kontrol edin.

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

Ben şahsen bu kodu javascript'te kaydırma yönünü tespit etmek için kullanıyorum ... Sadece lastscrollvalue'yu depolamak için bir değişken tanımlamanız ve sonra bunu if & else kullanmalısınız

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;

    }
}

Basit kod

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