Mendeteksi arah gulir

Jadi saya mencoba menggunakan JavaScript on scrolluntuk memanggil suatu fungsi. Tapi saya ingin tahu apakah saya bisa mendeteksi arah scroll tanpa menggunakan jQuery. Jika tidak, apakah ada solusi untuk itu?

Saya berpikir untuk hanya meletakkan tombol 'ke atas' tetapi ingin menghindarinya jika saya bisa.

Saya sekarang baru saja mencoba menggunakan kode ini tetapi tidak berhasil:

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

Itu dapat dideteksi dengan menyimpan nilai sebelumnya scrollTopdan membandingkan nilai scrollTop saat ini dengannya.

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

Cara sederhana untuk menangkap semua acara gulir (sentuh dan roda)

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

Gunakan ini untuk menemukan arah gulungan. Ini hanya untuk menemukan arah Vertical Scroll. Mendukung semua browser lintas.

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

Contoh

Anda dapat mencoba melakukan ini.

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>

Ini adalah tambahan dari jawaban prateek. Sepertinya ada kesalahan dalam kode di IE jadi saya memutuskan untuk memodifikasinya sedikit tidak ada yang mewah (hanya kondisi lain)

$('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. Inisialisasi oldValue
2. Dapatkan newValue dengan mendengarkan acara tersebut
3. Kurangi keduanya
4. Simpulkan dari hasilnya
5. Perbarui oldValue dengan newValue

// Inisialisasi

let oldValue = 0;

// Mendengarkan acara tersebut

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

Anda bisa mendapatkan posisi scrollbar menggunakan document.documentElement.scrollTop. Dan kemudian hanya masalah membandingkannya dengan posisi sebelumnya.

Kode sederhana ini akan bekerja: Periksa konsol untuk hasil.

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

Saya pribadi menggunakan kode ini untuk mendeteksi arah gulir di javascript ... Anda hanya perlu menentukan variabel untuk menyimpan nilai gulungan terakhir dan kemudian menggunakan ini jika & lain

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;

    }
}

Kode sederhana

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