Bagaimana untuk Melumpuhkan Tatal Tetingkap Sementara Semasa Animasi jQuery?

Melumpuhkan Penatalan Tetingkap Buat Sementara

Apabila menggunakan pemalam scrollTo jQuery, menghalang penatalan yang tidak diingini semasa animasi adalah penting untuk pengalaman pengguna yang lancar. Walaupun satu pilihan adalah untuk menogol limpahan badan, pendekatan yang lebih halus melibatkan melumpuhkan bar skrol sambil mengekalkan keterlihatannya.

Penyelesaian: Membatalkan Interaksi Tatal

Acara tatal itu sendiri tidak boleh dibatalkan. Sebaliknya, pertimbangkan untuk menghalang interaksi khusus yang mencetuskan penatalan, termasuk:

• Tatal tetikus dan sentuh (untuk peranti mudah alih)
• Butang papan kekunci yang dikaitkan dengan penatalan (cth., kekunci anak panah, ke atas halaman/ bawah, rumah, hujung)

Pelaksanaan

The kod JavaScript berikut mencapai ini:

// Prevent scroll events
function disableScroll() {
  // Add event listeners for various scroll interactions
  window.addEventListener('DOMMouseScroll', preventDefault, false); // Older Firefox
  window.addEventListener('wheel', preventDefault, { passive: false }); // Modern desktop
  window.addEventListener('touchmove', preventDefault, { passive: false }); // Mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false); // Keyboard
}

// Re-enable scroll events
function enableScroll() {
  // Remove event listeners for scroll interactions
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener('wheel', preventDefault, { passive: false });
  window.removeEventListener('touchmove', preventDefault, { passive: false });
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

// Function to prevent event default action
function preventDefault(e) {
  e.preventDefault();
}

// Function to prevent default for specific keyboard scroll keys
function preventDefaultForScrollKeys(e) {
  const scrollKeys = [37, 38, 39, 40]; // Arrow keys
  if (scrollKeys.includes(e.keyCode)) {
    e.preventDefault();
  }
}

Untuk melumpuhkan penatalan, panggil disableScroll(); untuk mendayakannya semula, panggil enableScroll().

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Tatal Tetingkap Sementara Semasa Animasi jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!