Bagaimanakah Saya Boleh Menentukan Arah Tatal dalam JavaScript Tanpa Menggunakan jQuery?

Menentukan Arah Tatal tanpa jQuery

Mengesan Arah Tatal

Menentukan arah acara tatal boleh dicapai tanpa bergantung pada jQuery. Berikut ialah pelaksanaan JavaScript:

<code class="javascript">var lastScrollTop = 0;

// Adjust the element selector based on the target of your scroll event.
document.querySelector('body').addEventListener("scroll", function() {
   var st = window.pageYOffset || document.documentElement.scrollTop;
   if (st > lastScrollTop) {
      // Downscroll code
   } else if (st < lastScrollTop) {
      // Upscroll code
   }
   lastScrollTop = st <= 0 ? 0 : st; // Account for negative scrolling or devices with touch events
}, false);</code>

Dalam kod ini:

• lastScrollTop menyimpan kedudukan skrol sebelumnya.
• Pendengar acara skrol menjejak kedudukan skrol semasa dalam st.
• Dengan membandingkan st dengan lastScrollTop, anda boleh menentukan arah tatal.
• Pernyataan if dilaksanakan semasa menatal ke bawah, manakala pernyataan if yang lain dilaksanakan apabila menatal ke atas.
• ScrollTop terakhir dikemas kini kepada kedudukan skrol semasa untuk bersedia untuk acara skrol seterusnya.

Mengelakkan Butang "Kembali ke Atas"

Daripada menambah "Kembali ke Atas" butang, anda boleh menggabungkan pendekatan yang lebih lancar dengan mengesan arah tatal. Sebagai contoh, anda boleh:

• Memaparkan bar navigasi terapung yang menjadi kelihatan apabila menatal ke bawah dan bersembunyi apabila menatal ke atas.
• Gunakan animasi CSS untuk mendedahkan atau memudarkan elemen kerana halaman itu adalah ditatal.
• Laraskan kelegapan elemen pada halaman berdasarkan arah tatal, mencipta kesan paralaks.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menentukan Arah Tatal dalam JavaScript Tanpa Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!