Mendeteksi arah gulir

120

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")
}
dwinnbrown
sumber
Ini wheelDeltaacara acara. Cukup tidak lintas browser. Lihat phrogz.net/js/wheeldelta.html
marekful
1
hmmm tidak seperti yang saya cari tapi saya menghargai bantuan Anda: P Ada saran lain?
dwinnbrown

Jawaban:

177

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);
Prateek
sumber
20
Akan lebih aman untuk menginisialisasi lastScrollTopke pageYOffset || scrollTop daripada mengasumsikan 0
Ed Ballot
Setuju !! Terima kasih @EdBot. Kita harus menginisialisasi acara window.onload yang sama.
Prateek
@Prateek Terima kasih atas jawaban Anda tetapi tidak berhasil untuk saya ... Saya mencoba untuk 'mengubah adegan' di aplikasi web saya yang dibuat menggunakan Tumult Hype.
dwinnbrown
Saya telah menambahkan beberapa komentar dalam jawaban saya, silakan periksa. Saya kira Anda menggunakan "element.addEventListener".
Prateek
@Prateek masih ada yang aku takuti. Mungkinkah ini berkaitan dengan fakta bahwa, saya menjalankannya pada pemuatan halaman? Berikut tangkapan layarnya
dwinnbrown
53

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;
}
IT VLOG
sumber
10
Selamat datang di SO, jika Anda menambahkan deskripsi ke jawaban Anda, ini bisa lebih membantu OP dan orang lain.
Alejandro Montilla
32

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

Vasi
sumber
2
Ini bagus, tetapi sepertinya hanya berfungsi untuk menggunakan roda gulir
Jonathan.Brink
1
Dari dokumen web MDN: Catatan: Jangan bingung antara acara roda dengan acara gulir. Tindakan default peristiwa roda bersifat spesifik penerapan, dan tidak selalu mengirimkan peristiwa gulir. Meskipun demikian, nilai delta * dalam peristiwa roda tidak selalu mencerminkan arah pengguliran konten. Oleh karena itu, jangan mengandalkan properti delta * kejadian roda untuk mendapatkan arah pengguliran. Sebagai gantinya, deteksi perubahan nilai scrollLeft dan scrollTop target dalam acara scroll. developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
battaboombattabaam
10

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>

davecar21
sumber
ini tidak bekerja dengan baik untuk saya. Ketika saya menggulir ke atas bahkan ke atas beberapa ketinggian tertentu itu menunjukkan
Pengembang
8

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;
});});
Emmanual
sumber
1
Terima kasih atas petunjuk Anda ... ini tampaknya terhubung ke opsi IE "Pengguliran Halus"
Kristo
5
  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;
});
thewebjackal
sumber
3

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

Igal S.
sumber
Oke dan masih dapatkah saya menggunakan ini di situs web yang secara tradisional tidak mengizinkan pengguliran (yaitu, cocok dengan lebar dan tinggi browser 100%. Terima kasih
dwinnbrown
2

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);
});
Usman Ahmed
sumber
1

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;

    }
}
WagonWolf
sumber
0

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();
}
Ricardo Schmidt
sumber
Meskipun kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang bagaimana dan / atau mengapa kode ini memecahkan masalah akan meningkatkan nilai jangka panjang jawaban.
Donald Duck