Bagaimana Anda Boleh Menentukan Arah Tatal dalam JavaScript Tanpa jQuery?

Mengesan Arah Tatal Tanpa jQuery

Dalam pembangunan web, mengesan arah tatal boleh berguna untuk melaksanakan fungsi seperti tatal tak terhingga atau runtuh bar alat. Walaupun perpustakaan seperti jQuery menawarkan penyelesaian yang mudah, mari kita terokai bagaimana ini boleh dicapai tanpa penggunaannya.

Untuk menentukan arah tatal, kita boleh menjejaki kedudukan tatal sebelumnya (scrollTop atau pageYOffset) dan membandingkannya dengan tatal semasa kedudukan. Perbezaan ini menandakan sama ada kami menatal ke atas atau ke bawah.

Berikut ialah coretan JavaScript yang menunjukkan pendekatan ini:

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

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
element.addEventListener("scroll", function(){ 
   var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
   if (st > lastScrollTop) {
      // downscroll code
   } else if (st < lastScrollTop) {
      // upscroll code
   } // else was horizontal scroll
   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);</code>

Dalam kod ini, kami menyemak sama ada kedudukan skrol semasa lebih besar daripada atau kurang daripada kedudukan tatal sebelumnya. Jika lebih besar, kami menatal ke bawah, dan jika kurang, kami menatal ke atas. Penatalan mendatar juga diambil kira dengan menyemak sama ada kedudukan tatal tidak berubah.

Dengan menyimpan kedudukan tatal sebelumnya dan membandingkannya dengan kedudukan semasa, kami boleh mengesan arah tatal dengan berkesan tanpa memerlukan perpustakaan luaran. Kaedah ini boleh digunakan pada pelbagai elemen, termasuk objek tetingkap untuk pengesanan tatal global.

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