Bagaimana saya bisa menentukan arah acara gulir jQuery?

344

Saya mencari sesuatu untuk efek ini:

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

Ada ide?

Zach
sumber
Bagi mereka yang memiliki masalah dengan pengguliran elastis, silakan gunakan jawaban ini stackoverflow.com/questions/7154967/jquery-detect-scrolldown
Timothy Dalton
1
Paling mudah untuk menggunakan wheelacara hari ini: stackoverflow.com/a/33334461/3168107 .
Shikkediel

Jawaban:

699

Periksa saat ini scrollTopvs sebelumnyascrollTop

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});
Josiah Ruddell
sumber
16
Adakah cara untuk mengatur sensibilitas untuk ini?
cocoa coder
8
Saya membuat contoh di codepen ini . Mungkin saya akan memperbarui memperbarui jawaban ini dengan plugin jQuery karena popularitasnya.
Josiah Ruddell
3
Sudahkah Anda mencoba ini jika Anda kembali ke halaman sebelumnya yang memiliki kode ini? Jika Anda menggulir ke bawah halaman Anda, katakanlah 500PX. Pergi ke halaman lain dan kemudian kembali ke halaman awal. Beberapa browser menjaga posisi gulir dan akan membawa Anda kembali ke halaman. Apakah Anda memiliki mulai lastScrollTopdari 0 atau akan diinisialisasi dengan benar ??
TCHdvlp
7
@TCHdvlp - skenario terburuk, peristiwa gulir pertama akan memperbarui variabel dan acara kedua akan akurat (.. itu hanya masalah pada upscroll setelah navigasi kembali). Ini dapat diperbaiki dengan mengatur var lastScrollTop = $(window).scrollTop()setelah browser memperbarui posisi gulir pada pemuatan halaman.
Josiah Ruddell
2
Pembaruan tentang ini: Berhati-hatilah karena beberapa browser, khususnya IE 11 pada Windows 8, dapat menjalankan gulir berdasarkan peristiwa subpixel (pengguliran halus). Tetapi karena itu melaporkan scrollTop sebagai bilangan bulat, nilai gulir Anda sebelumnya bisa sama dengan yang sekarang.
Renato
168

Anda dapat melakukannya tanpa harus melacak bagian atas gulir sebelumnya, karena semua contoh lainnya memerlukan:

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }
});

Saya bukan ahli dalam hal ini, jadi jangan ragu untuk meneliti lebih lanjut, tetapi tampaknya ketika Anda menggunakannya $(element).scroll, acara yang didengarkan adalah acara 'gulir'.

Tetapi jika Anda secara khusus mendengarkan suatu mousewheelperistiwa dengan menggunakan bind, originalEventatribut parameter acara ke panggilan balik Anda berisi informasi yang berbeda. Bagian dari informasi itu adalahwheelDelta . Jika positif, Anda memindahkan roda mouse ke atas. Jika negatif, Anda memindahkan roda mouse ke bawah.

Dugaan saya adalah bahwa mousewheelperistiwa akan menyala ketika roda mouse berputar, bahkan jika halaman tidak menggulir; sebuah kasus di mana peristiwa 'gulir' mungkin tidak dipecat. Jika mau, Anda dapat menghubungi event.preventDefault()bagian bawah callback Anda untuk mencegah halaman bergulir, dan agar Anda dapat menggunakan acara roda mouse untuk sesuatu selain dari scroll halaman, seperti beberapa jenis fungsi zoom.

Cilphex
sumber
13
Bagus tapi sayangnya satu-satunya Firefox tidak mendukungnya developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/… (diuji dalam FF v15). : C
nuala
8
Ini berguna bagi saya: Saya perlu mendeteksi pengguliran, meskipun halaman itu sendiri sebenarnya tidak menggulir, jadi scrollToptidak memperbarui. Bahkan, $(window).scroll()tidak menembak sama sekali.
Martti Laine
13
Sangat menyenangkan bahwa Anda tidak perlu keadaan lama. Namun teknik ini tidak akan berfungsi pada ponsel atau tablet, karena mereka tidak memiliki roda mouse!
joeytwiddle
13
Pendekatan ini tidak akan berfungsi jika saya gulir dengan keyboard. Ini jelas merupakan pendekatan yang menarik untuk hal-hal seperti zoom, tetapi saya tidak berpikir ini membahas pertanyaan arah gulir.
chmac
6
$ ("html, body"). bind ({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': function (e) {// ...}); berfungsi untuk saya dalam mendeteksi semua data gulir peramban
GoreDefex
31

Simpan lokasi gulir sebelumnya, lalu lihat apakah yang baru lebih dari atau kurang dari itu.

Berikut cara untuk menghindari variabel global ( biola tersedia di sini ):

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert('down');
       } else {
          alert('up');
       }
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately
Skilldrick
sumber
29

Solusi yang Ada

Mungkin ada 3 solusi dari postingan ini dan jawaban lainnya .

Solusi 1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

Solusi 2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

Solusi 3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

Tes Multi Browser

Saya tidak bisa mengujinya di Safari

chrome 42 (Win 7)

  • Solusi 1
    • Atas: 1 acara per 1 gulir
    • Bawah: 1 acara per 1 gulir
  • Soltion 2
    • Atas: Tidak berfungsi
    • Bawah: Tidak berfungsi
  • Solusi 3
    • Atas: 1 acara per 1 gulir
    • Bawah: 1 acara per 1 gulir

Firefox 37 (Win 7)

  • Solusi 1
    • Naik: 20 acara per 1 gulir
    • Bawah: 20 acara per 1 gulir
  • Soltion 2
    • Atas: Tidak berfungsi
    • Bawah: 1 acara per 1 gulir
  • Solusi 3
    • Atas: Tidak berfungsi
    • Bawah: Tidak berfungsi

IE 11 (Win 8)

  • Solusi 1
    • Atas: 10 peristiwa per 1 gulir (efek samping: gulir ke bawah terjadi pada akhirnya)
    • Bawah: 10 acara per 1 gulir
  • Soltion 2
    • Atas: Tidak berfungsi
    • Bawah: Tidak berfungsi
  • Solusi 3
    • Atas: Tidak berfungsi
    • Bawah: 1 acara per 1 gulir

IE 10 (Win 7)

  • Solusi 1
    • Atas: 1 acara per 1 gulir
    • Bawah: 1 acara per 1 gulir
  • Soltion 2
    • Atas: Tidak berfungsi
    • Bawah: Tidak berfungsi
  • Solusi 3
    • Atas: 1 acara per 1 gulir
    • Bawah: 1 acara per 1 gulir

IE 9 (Win 7)

  • Solusi 1
    • Atas: 1 acara per 1 gulir
    • Bawah: 1 acara per 1 gulir
  • Soltion 2
    • Atas: Tidak berfungsi
    • Bawah: Tidak berfungsi
  • Solusi 3
    • Atas: 1 acara per 1 gulir
    • Bawah: 1 acara per 1 gulir

IE 8 (Win 7)

  • Solusi 1
    • Atas: 2 peristiwa per 1 gulir (efek samping: gulir ke bawah terjadi pada akhirnya)
    • Bawah: 2 ~ 4 acara per 1 gulir
  • Soltion 2
    • Atas: Tidak berfungsi
    • Bawah: Tidak berfungsi
  • Solusi 3
    • Atas: 1 acara per 1 gulir
    • Bawah: 1 acara per 1 gulir

Solusi Gabungan

Saya memeriksa bahwa efek samping dari IE 11 dan IE 8 berasal dari if elsepernyataan. Jadi, saya menggantinya dengan if else ifpernyataan sebagai berikut.

Dari uji multi browser, saya memutuskan untuk menggunakan Solution 3 untuk browser umum dan Solution 1 untuk firefox dan IE 11.

Saya merujuk jawaban ini untuk mendeteksi IE 11.

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }
Programmer Kimia
sumber
Jika seseorang dapat menambahkan hasil Safari browser, akan sangat membantu untuk menambah solusi.
Programmer Kimia
Ups! Saya menemukan bahwa Mobile Chrome dan browser default Android hanya dicakup oleh Solusi 1. Jadi akan lebih baik untuk menggunakan Solusi 1 dan 3 bersama-sama untuk menutupi berbagai browser.
Programmer Kimia
Tidak akan berfungsi jika desainnya adalah desain tata letak yang tetap. Jika Anda ingin mendeteksi arah gulir pada situs web tanpa gulir statis, Firefox dan IE11 tidak akan berfungsi
Shannon Hochkins
Saya menemukan bahwa ketika saya menggunakan ini menggunakan "Browser Lain" di chrome, ini tidak terlalu banyak digunakan ketika Anda ingin mendeteksi pengguliran oleh kedua roda mouse dan scroll bar. .scroll akan mendeteksi kedua jenis scrolling di chrome.
Sam
12

Saya mengerti sudah ada jawaban yang diterima, tetapi ingin memposting apa yang saya gunakan seandainya itu bisa membantu siapa saja. Saya mendapatkan arah seperticliphex dengan acara roda mouse tetapi dengan dukungan untuk Firefox. Berguna melakukannya dengan cara ini jika Anda melakukan sesuatu seperti mengunci gulir dan tidak bisa mendapatkan gulir saat ini.

Lihat versi live di sini .

$(window).on('mousewheel DOMMouseScroll', function (e) {

    var direction = (function () {

        var delta = (e.type === 'DOMMouseScroll' ?
                     e.originalEvent.detail * -40 :
                     e.originalEvent.wheelDelta);

        return delta > 0 ? 0 : 1;
    }());

    if(direction === 1) {
       // scroll down
    }
    if(direction === 0) {
       // scroll up
    }
});
suporserius
sumber
@ EtienneMartin kode di atas bergantung pada jQuery jika itu yang menyebabkan kesalahan Anda. Silakan lihat biola terlampir untuk melihatnya berfungsi.
suporserius
8

Gulir Acara

Acara gulir berperilaku aneh di FF (dipecat berkali-kali karena kelancaran bergulir) tetapi berfungsi.

Catatan: Acara gulir sebenarnya diaktifkan ketika menyeret bilah gulir, menggunakan tombol kursor atau roda mouse.

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log("β–Ί End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

Acara Roda

Anda juga dapat melihat MDN, ini memaparkan informasi hebat tentang Acara Roda .

Catatan: Acara roda hanya ditembakkan saat menggunakan roda mouse ; tombol kursor dan menyeret bilah gulir tidak menyalakan acara.

Saya membaca dokumen dan contohnya: Mendengarkan acara ini di browser
dan setelah beberapa tes dengan FF, IE, chrome, safari, saya berakhir dengan cuplikan ini:

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});
jherax
sumber
2
Saya memiliki tampilan panel tetap yang menonaktifkan bilah gulir yang sebenarnya, jadi saya perlu mendeteksi arah dari roda mouse. Solusi roda mouse Anda bekerja dengan sempurna lintas peramban jadi terima kasih untuk itu!
Shannon Hochkins
8

Jika Anda hanya ingin tahu apakah Anda menggulir ke atas atau ke bawah menggunakan perangkat penunjuk (mouse atau track pad), Anda dapat menggunakan properti deltaYwheel acara.

$('.container').on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
    $('.result').append('Scrolled down!<br>');
  } else {
    $('.result').append('Scrolled up!<br>');
  }
});
.container {
  height: 200px;
  width: 400px;
  margin: 20px;
  border: 1px solid black;
  overflow-y: auto;
}
.content {
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="content">
    Scroll me!
  </div>
</div>

<div class="result">
  <p>Action:</p>
</div>

Yuri
sumber
Tautan ini mengatakan untuk tidak bergantung pada deltaY developer.mozilla.org/en-US/docs/Web/Events/wheel
Charlie Martin
3
var tempScrollTop, currentScrollTop = 0; 

$(window).scroll(function(){ 

   currentScrollTop = $("#div").scrollTop(); 

   if (tempScrollTop > currentScrollTop ) {
       // upscroll code
   }
  else if (tempScrollTop < currentScrollTop ){
      // downscroll code
  }

  tempScrollTop = currentScrollTop; 
} 

atau gunakan ekstensi roda mouse , lihat di sini .

Adam
sumber
3

Saya telah melihat banyak versi jawaban yang baik di sini, tetapi tampaknya beberapa orang mengalami masalah browser lintas jadi ini adalah perbaikan saya.

Saya telah menggunakan ini dengan sukses untuk mendeteksi arah di FF, IE dan Chrome ... Saya belum mengujinya di safari karena saya biasanya menggunakan windows.

$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': 
    function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();

        //Determine Direction
        if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) {
            //Up
            alert("up");

        } else if (e.originalEvent.detail && e.originalEvent.detail <= 0) {
            //Up
            alert("up");

        } else {
            //Down
            alert("down");
        }
    }
});

Ingatlah, saya juga menggunakan ini untuk menghentikan pengguliran, jadi jika Anda ingin pengguliran tetap terjadi, Anda harus menghapus e.preventDefault(); e.stopPropagation();

GoreDefex
sumber
1
selalu kembali ke Android GS5
SISYN
Ini bekerja dengan baik! Saya punya masalah dengan jawaban terpilih teratas di IE. Ini tidak memiliki masalah itu! +1 dari saya.
Radmation
3

Untuk mengabaikan snap / momentum / bangkit kembali di bagian atas dan bawah halaman, berikut adalah versi modifikasi dari jawaban Yosia yang diterima :

var prevScrollTop = 0;
$(window).scroll(function(event){

    var scrollTop = $(this).scrollTop();

    if ( scrollTop < 0 ) {
        scrollTop = 0;
    }
    if ( scrollTop > $('body').height() - $(window).height() ) {
        scrollTop = $('body').height() - $(window).height();
    }

    if (scrollTop >= prevScrollTop && scrollTop) {
        // scrolling down
    } else {
        // scrolling up
    }

    prevScrollTop = scrollTop;
});
Andrew Tibbetts
sumber
3

Anda dapat menentukan arah jalan tikus.

$(window).on('mousewheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta ? 
                   e.originalEvent.wheelDelta : -e.originalEvent.detail;

    if (delta >= 0) {
        console.log('scroll up');
    } else {
        console.log('scroll down');
    }
});
J. Kovacevic
sumber
3

Gunakan ini untuk menemukan arah gulir. Ini hanya untuk menemukan arah Gulir Vertikal. Mendukung semua browser lintas.

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

    scrollableElement.addEventListener('wheel', findScrollDirectionOtherBrowsers);

    function findScrollDirectionOtherBrowsers(event){
        var delta;

        if (event.wheelDelta){
            delta = event.wheelDelta;
        }else{
            delta = -1 * event.deltaY;
        }

        if (delta < 0){
            console.log("DOWN");
        }else if (delta > 0){
            console.log("UP");
        }

    }

Contoh

Vasi
sumber
3

kode ini berfungsi baik dengan IE, Firefox, Opera dan Chrome:

$(window).bind('wheel mousewheel', function(event) {
      if (event.originalEvent.deltaY >= 0) {
          console.log('Scroll down');
      }
      else {
          console.log('Scroll up');
      }
  });

'wheel mousewheel' dan properti deltaY harus digunakan dalam fungsi bind () .

Ingat: Anda pengguna harus memperbarui sistem dan browser mereka untuk alasan keamanan. Pada 2018, alasan "Saya punya IE 7" adalah omong kosong. Kita harus mengedukasi pengguna.

Semoga harimu menyenangkan :)

Cyril Morales
sumber
1
Saya mencoba kode Anda dan itu sebaliknya. Yang pertama dipicu saat menggulir ke bawah dan yang kedua saat menggulir ke atas.
AlexioVay
Hai :) Terima kasih AlexioVay. Saya mengedit kode saya (Tentang waktu juga!) ^^. Tentu saja "console.log ('.......')" itu hanya contoh dari apa yang bisa kita lakukan.
Cyril Morales
2

Keep it super simple:

Cara Pendengar Acara jQuery:

$(window).on('wheel', function(){
  whichDirection(event);
});

Cara Pendengar Acara Vanilla JavaScript:

if(window.addEventListener){
  addEventListener('wheel', whichDirection, false);
} else if (window.attachEvent) {
  attachEvent('wheel', whichDirection, false);
}

Fungsi Tetap Sama:

function whichDirection(event){
  console.log(event + ' WheelEvent has all kinds of good stuff to work with');
  var scrollDirection = event.deltaY;
  if(scrollDirection === 1){
    console.log('meet me at the club, going down', scrollDirection);
  } else if(scrollDirection === -1) {
    console.log('Going up, on a tuesday', scrollDirection);
  }
}

Saya menulis posting yang lebih mendalam di sini

CR Rollyson
sumber
Apakah roda jquery diperlukan untuk menggunakan versi jquery?
Hastig Zusammenstellen
1
jquery-wheel tidak diperlukan untuk ini @HastigZusammenstellen
CR Rollyson
2

Anda dapat menggunakan opsi gulir dan roda mouse untuk melacak gerakan naik dan turun sekaligus.

 $('body').bind('scroll mousewheel', function(event) {

if (event.originalEvent.wheelDelta >= 0) {
      console.log('moving down');   
    }
    else {
      console.log('moving up'); 
    }
});

Anda dapat mengganti 'tubuh' dengan (jendela) juga.

Zeeshan Rasool
sumber
Tampaknya berfungsi dengan baik di Chrome tetapi tidak di FF (55.0.2, Ubuntu)
Hastig Zusammenstellen
1

stok kenaikan di .data ()elemen digulir, Anda kemudian akan dapat menguji berapa kali gulir mencapai bagian atas.

Spacefrog
sumber
1

Mengapa tidak ada yang menggunakan eventobjek yang dikembalikan oleh jQuerypada scroll?

$window.on('scroll', function (event) {
    console.group('Scroll');
    console.info('Scroll event:', event);
    console.info('Position:', this.pageYOffset);
    console.info('Direction:', event.originalEvent.dir); // Here is the direction
    console.groupEnd();
});

Saya menggunakan chromiumdan saya tidak memeriksa browser lain jika mereka memiliki dirproperti.

Jiab77
sumber
1

Karena bindtelah ditinggalkan pada v3 ("digantikan oleh on") dan wheelsekarang didukung , lupakan wheelDelta:

$(window).on('wheel', function(e) {
  if (e.originalEvent.deltaY > 0) {
    console.log('down');
  } else {
    console.log('up');
  }
  if (e.originalEvent.deltaX > 0) {
    console.log('right');
  } else {
    console.log('left');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="white-space:nowrap;overflow:scroll">
πŸš‚πŸšƒπŸšƒπŸš‚πŸšƒπŸšƒπŸšƒπŸš‚πŸšƒπŸšƒπŸš‚πŸšƒπŸšƒπŸšƒπŸš‚πŸšƒ<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
πŸš‚πŸšƒπŸšƒπŸš‚πŸšƒπŸšƒπŸšƒπŸš‚πŸšƒπŸšƒπŸš‚πŸšƒπŸšƒπŸšƒπŸš‚πŸšƒ<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
πŸš‚πŸšƒπŸšƒπŸš‚πŸšƒπŸšƒπŸšƒπŸš‚πŸšƒπŸšƒπŸš‚πŸšƒπŸšƒπŸšƒπŸš‚πŸšƒ<br/>
🚎🚌🚌🚌🚎🚌🚌🚎🚌🚌🚌🚎🚌🚌🚎🚌<br/>
</h1>

wheelKompatibilitas Browser acara di MDN's (2019-03-18) :

Kompatibilitas acara roda

CPHPython
sumber
Kode di atas menghasilkan dua log konsol, gunakan yang berikut untuk memisahkan sepenuhnya atas / bawah / kiri / kanan: if(e.originalEvent.deltaY > 0) { console.log('down'); } else if(e.originalEvent.deltaY < 0) { console.log('up'); } else if(e.originalEvent.deltaX > 0) { console.log('right'); } else if(e.originalEvent.deltaX < 0) { console.log('left'); }
Don Wilson
Untuk touchmoveacara penggunaan seluler .
CPHPython
1

Anda bisa menggunakan ini juga

$(document).ready(function(){

  var currentscroll_position = $(window).scrollTop();
$(window).on('scroll', function(){
Get_page_scroll_direction();
});

function Get_page_scroll_direction(){
  var running_scroll_position = $(window).scrollTop();
  if(running_scroll_position > currentscroll_position) {
      
      $('.direction_value').text('Scrolling Down Scripts');

  } else {
       
       $('.direction_value').text('Scrolling Up Scripts');

  }
  currentscroll_position = running_scroll_position;
}

});
.direction_value{
  position: fixed;
  height: 30px;
  background-color: #333;
  color: #fff;
  text-align: center;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="direction_value">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>

arvinda kumar
sumber
0

di .data()elemen Anda dapat menyimpan JSON dan menguji nilai untuk meluncurkan acara

{ top : 1,
   first_top_event: function(){ ...},
   second_top_event: function(){ ...},
   third_top_event: function(){ ...},
   scroll_down_event1: function(){ ...},
   scroll_down_event2: function(){ ...}
}
Spacefrog
sumber
0

Ini adalah deteksi sederhana dan mudah ketika pengguna menggulir menjauh dari bagian atas halaman dan ketika mereka kembali ke atas.

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {
        // User has scrolled
    } else {
        // User at top of page
    }
});
Kbam7
sumber
0

Ini adalah solusi optimal untuk mendeteksi arah tepat ketika pengguna akhir menggulir.

var currentScrollTop = 0 ;

$(window).bind('scroll', function () {     

    scrollTop = $(this).scrollTop();

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {

        if(scrollTop > currentScrollTop){
            // downscroll code
            $('.mfb-component--bl').addClass('mfbHide');
        }else{
            // upscroll code
            $('.mfb-component--bl').removeClass('mfbHide');
        }
        currentScrollTop = scrollTop;

    }, 250));

});
Mahmoud
sumber
0

Anda harus mencoba ini

var scrl
$(window).scroll(function(){
        if($(window).scrollTop() < scrl){
            //some code while previous scroll
        }else{
            if($(window).scrollTop() > 200){
                //scroll while downward
            }else{//scroll while downward after some specific height
            }
        }
        scrl = $(window).scrollTop();
    });
thakurdev
sumber
0

Saya punya masalah dengan scrolling elastis (scroll bouncing, rubber-banding). Mengabaikan acara gulir ke bawah jika dekat dengan halaman atas berfungsi untuk saya.

var position = $(window).scrollTop();
$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    var downScroll = scroll > position;
    var closeToTop = -120 < scroll && scroll < 120;
    if (downScroll && !closeToTop) {
        // scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
        $('.top-container').slideUp('fast');
        $('.main-header').addClass('padding-top');
    } else {
        // scrolled up
        $('.top-container').slideDown('fast');
        $('.main-header').removeClass('padding-top');
    }
    position = scroll;
});
uggeh
sumber
0

Ini bekerja di semua browser pc atau ponsel, memperluas jawaban atas. Seseorang dapat membangun jendela objek acara yang lebih kompleks ["scroll_evt"] lalu memanggilnya dalam fungsi handleScroll (). Yang ini memicu untuk 2 kondisi bersamaan, jika penundaan tertentu telah berlalu atau delta tertentu dilewati untuk menghilangkan beberapa pemicu yang tidak diinginkan.

window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
$(window).scroll(function() {

    var currentScroll = $(this).scrollTop();
    var currentTime = Date.now();
    var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
    boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
    if(boolRun){
        window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
        window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
        window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
        window["scroll_evt"]["pos"] = currentScroll;
        window["scroll_evt"]["time"] = currentTime;
        handleScroll();
    }
});


function handleScroll(){
    event.stopPropagation();
    //alert(window["scroll_evt"]["direction"]);
    console.log(window["scroll_evt"]);
}
Keluwesan
sumber