Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mengesan Arah Tatal dalam JavaScript Tanpa jQuery?
Mengesan Arah Tatal Tanpa jQuery
Menentukan arah tatal adalah penting untuk meningkatkan pengalaman pengguna. Walaupun jQuery memudahkan tugas ini, adalah mungkin untuk mencapai kefungsian yang serupa menggunakan JavaScript vanila.
Memahami Isu
Kod yang disediakan cuba mengesan arah tatal dengan membandingkan skrolTop semasa nilai kepada sifar. Walau bagaimanapun, pendekatan ini adalah cacat kerana ia menganggap tatal sentiasa bermula dari sifar. Pada hakikatnya, kedudukan tatal boleh menjadi sebarang nilai.
Mengesan Arah Tatal Secara Manual
Kunci untuk mengesan arah tatal ialah menyimpan nilai Tatal Atas sebelumnya dan membandingkannya dengan nilai semasa. Apabila nilai semasa lebih besar daripada nilai sebelumnya, tatal bergerak ke bawah. Sebaliknya, jika nilai semasa kurang daripada nilai sebelumnya, tatal akan bergerak ke atas.
Pelaksanaan
Coretan kod JavaScript berikut menunjukkan cara untuk mengesan arah tatal:
<code class="javascript">var lastScrollTop = 0; // Add event listener to the target element element.addEventListener("scroll", function () { // Get the current scroll position var st = window.pageYOffset || document.documentElement.scrollTop; // Compare the current and previous scroll positions if (st > lastScrollTop) { // Downscroll code } else if (st < lastScrollTop) { // Upscroll code } else { // Horizontal scroll } // Update the lastScrollTop value lastScrollTop = st <= 0 ? 0 : st; }, false);</code>
Pastikan Keserasian
Kod ini harus berfungsi dalam kebanyakan penyemak imbas moden. Walau bagaimanapun, untuk keserasian ke belakang, adalah disyorkan untuk menggunakan sifat window.pageYOffset atau document.documentElement.scrollTop untuk mendapatkan kedudukan tatal. Selain itu, pembolehubah lastScrollTop hendaklah dimulakan kepada sifar untuk mengendalikan penatalan negatif atau penatalan pada peranti mudah alih.
Kesimpulan
Dengan menggunakan pendekatan yang diterangkan dalam artikel ini, anda boleh berkesan mengesan arah tatal menggunakan JavaScript vanila. Teknik ini amat berguna untuk melaksanakan ciri seperti memuatkan malas, menatal tanpa had dan menatal lancar.
Atas ialah kandungan terperinci Bagaimana untuk Mengesan Arah Tatal dalam JavaScript Tanpa jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!