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!