Saya mencari sesuatu untuk efek ini:
$(window).scroll(function(event){
if (/* magic code*/ ){
// upscroll code
} else {
// downscroll code
}
});
Ada ide?
javascript
jquery
Zach
sumber
sumber
wheel
acara hari ini: stackoverflow.com/a/33334461/3168107 .Jawaban:
Periksa saat ini
scrollTop
vs sebelumnyascrollTop
sumber
lastScrollTop
dari 0 atau akan diinisialisasi dengan benar ??var lastScrollTop = $(window).scrollTop()
setelah browser memperbarui posisi gulir pada pemuatan halaman.Anda dapat melakukannya tanpa harus melacak bagian atas gulir sebelumnya, karena semua contoh lainnya memerlukan:
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
mousewheel
peristiwa dengan menggunakan bind,originalEvent
atribut 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
mousewheel
peristiwa akan menyala ketika roda mouse berputar, bahkan jika halaman tidak menggulir; sebuah kasus di mana peristiwa 'gulir' mungkin tidak dipecat. Jika mau, Anda dapat menghubungievent.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.sumber
scrollTop
tidak memperbarui. Bahkan,$(window).scroll()
tidak menembak sama sekali.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 ):
sumber
Solusi yang Ada
Mungkin ada 3 solusi dari postingan ini dan jawaban lainnya .
Solusi 1
Solusi 2
Solusi 3
Tes Multi Browser
Saya tidak bisa mengujinya di Safari
chrome 42 (Win 7)
Firefox 37 (Win 7)
IE 11 (Win 8)
IE 10 (Win 7)
IE 9 (Win 7)
IE 8 (Win 7)
Solusi Gabungan
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.
sumber
Safari browser
, akan sangat membantu untuk menambah solusi.Saya mengerti sudah ada jawaban yang diterima, tetapi ingin memposting apa yang saya gunakan seandainya itu bisa membantu siapa saja. Saya mendapatkan arah seperti
cliphex
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 .
sumber
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.
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:
sumber
Jika Anda hanya ingin tahu apakah Anda menggulir ke atas atau ke bawah menggunakan perangkat penunjuk (mouse atau track pad), Anda dapat menggunakan properti deltaY
wheel
acara.sumber
atau gunakan ekstensi roda mouse , lihat di sini .
sumber
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.
Ingatlah, saya juga menggunakan ini untuk menghentikan pengguliran, jadi jika Anda ingin pengguliran tetap terjadi, Anda harus menghapus
e.preventDefault(); e.stopPropagation();
sumber
Untuk mengabaikan snap / momentum / bangkit kembali di bagian atas dan bawah halaman, berikut adalah versi modifikasi dari jawaban Yosia yang diterima :
sumber
Anda dapat menentukan arah jalan tikus.
sumber
Gunakan ini untuk menemukan arah gulir. Ini hanya untuk menemukan arah Gulir Vertikal. Mendukung semua browser lintas.
Contoh
sumber
kode ini berfungsi baik dengan IE, Firefox, Opera dan Chrome:
'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 :)
sumber
Keep it super simple:
Cara Pendengar Acara jQuery:
Cara Pendengar Acara Vanilla JavaScript:
Fungsi Tetap Sama:
Saya menulis posting yang lebih mendalam di sini
sumber
Anda dapat menggunakan opsi gulir dan roda mouse untuk melacak gerakan naik dan turun sekaligus.
Anda dapat mengganti 'tubuh' dengan (jendela) juga.
sumber
stok kenaikan di
.data ()
elemen digulir, Anda kemudian akan dapat menguji berapa kali gulir mencapai bagian atas.sumber
Mengapa tidak ada yang menggunakan
event
objek yang dikembalikan olehjQuery
pada scroll?Saya menggunakan
chromium
dan saya tidak memeriksa browser lain jika mereka memilikidir
properti.sumber
Karena
bind
telah ditinggalkan pada v3 ("digantikan olehon
") danwheel
sekarang didukung , lupakanwheelDelta
:wheel
Kompatibilitas Browser acara di MDN's (2019-03-18) :sumber
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'); }
touchmove
acara penggunaan seluler .Anda bisa menggunakan ini juga
sumber
di
.data()
elemen Anda dapat menyimpan JSON dan menguji nilai untuk meluncurkan acarasumber
Ini adalah deteksi sederhana dan mudah ketika pengguna menggulir menjauh dari bagian atas halaman dan ketika mereka kembali ke atas.
sumber
Ini adalah solusi optimal untuk mendeteksi arah tepat ketika pengguna akhir menggulir.
sumber
Anda harus mencoba ini
sumber
Saya punya masalah dengan scrolling elastis (scroll bouncing, rubber-banding). Mengabaikan acara gulir ke bawah jika dekat dengan halaman atas berfungsi untuk saya.
sumber
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.
sumber