Bagaimanakah Saya Boleh Melumpuhkan Tatal dalam JavaScript buat sementara waktu untuk Pengalaman Pengguna yang Lebih Baik?

Lumpuhkan Tatal Sementara dalam Javascript untuk Pengalaman Pengguna yang Lancar

Penggantungan sementara tatal boleh meningkatkan pengalaman pengguna apabila bekerja dengan animasi, seperti pemalam jQuery scrollTo. Walaupun melumpuhkan penatalan sepenuhnya mungkin kelihatan seperti penyelesaian yang mudah, mengekalkan keterlihatan bar skrol sambil menghalang interaksi menawarkan pendekatan yang lebih elegan.

Untuk mencapai ini, kami akan menumpukan pada membatalkan acara interaksi yang berkaitan dengan kedua-dua tetikus dan tatal sentuh, termasuk butang papan kekunci.

[Berfungsi Demo]

// Event Codes for Navigation Keys
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

// Prevent Default Scrolling
function preventDefault(e) {
  e.preventDefault();
}

// Cancel Scrolling for Navigation Keys
function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

// Disable Scrolling
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // Firefox
  window.addEventListener('wheel', preventDefault, false); // Desktop
  window.addEventListener('touchmove', preventDefault, false); // Mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false); // Keyboard
}

// Enable Scrolling
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener('wheel', preventDefault, false); 
  window.removeEventListener('touchmove', preventDefault, false);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

Dengan memanggil disableScroll(), kami menghalang penatalan secara berkesan semasa animasi scrollTo sedang dijalankan. Setelah animasi selesai, enableScroll() boleh digunakan untuk memulihkan fungsi menatal.

Kemas kini: Sokongan Dipertingkat

Penyelesaian ini telah dikemas kini untuk berfungsi dengan lancar pada mudah alih moden penyemak imbas dan desktop Chrome. Pendengar pasif kini digabungkan untuk mengekalkan prestasi dan responsif pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melumpuhkan Tatal dalam JavaScript buat sementara waktu untuk Pengalaman Pengguna yang Lebih Baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!