Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Melumpuhkan Tatal dalam JavaScript Buat sementara waktu Sambil Mengekalkan Keterlihatan Bar Tatal?

Bagaimanakah Saya Boleh Melumpuhkan Tatal dalam JavaScript Buat sementara waktu Sambil Mengekalkan Keterlihatan Bar Tatal?

Mary-Kate Olsen
Lepaskan: 2024-12-14 14:38:12
asal
211 orang telah melayarinya

How Can I Temporarily Disable Scrolling in JavaScript While Maintaining Scrollbar Visibility?

Lumpuhkan Tatal Sementara dalam JavaScript

Apabila menggunakan pemalam scrollTo jQuery, ia boleh menjadi masalah jika pengguna menatal semasa animasi sedang sedang berjalan. Walaupun mungkin untuk melumpuhkan penatalan dengan menetapkan sifat CSS "limpahan" kepada "tersembunyi", adalah lebih baik untuk memastikan bar skrol kelihatan tetapi tidak aktif.

Untuk mencapai ini, adalah perlu untuk menghalang peristiwa interaksi yang dikaitkan dengan penatalan. Ini termasuk skrol tetikus dan sentuhan, serta butang yang mencetuskan penatalan.

Pelaksanaan Kod

Kod JavaScript berikut menunjukkan cara untuk melumpuhkan dan mendayakan penatalan buat sementara waktu:


// Cegah tatal acara
fungsi preventDefault(e) {
e.preventDefault();
}

// Halang kekunci yang dikaitkan dengan penatalan
fungsi preventDefaultForScrollKeys(e) {
jika ( kekunci[e.keyCode]) {

preventDefault(e);
return false;
Salin selepas log masuk

}
}

// Dict untuk kod kekunci skrol
kekunci const = {37: 1, 38: 1, 39: 1, 40: 1 };

// Lumpuhkan penatalan
fungsi disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
window.addEventListener('wheel', preventDefault, { pasif: false }); // desktop moden
window.addEventListener('touchmove', preventDefault, { pasif: false }); // mudah alih
window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// Dayakan penatalan
fungsi enableScroll() {
window.removeEventListener('DOMMouseScroll ', preventDefault, false);
window.removeEventListener('wheel', preventDefault, { pasif: false });
window.removeEventListener('touchmove', preventDefault, { pasif: false });
window.removeEventListener('keydown', preventDefaultForScrollKey false);
}

Untuk melumpuhkan penatalan, hanya panggil fungsi disableScroll(). Untuk mendayakan penatalan sekali lagi, panggil fungsi enableScroll().

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melumpuhkan Tatal dalam JavaScript Buat sementara waktu Sambil Mengekalkan Keterlihatan Bar Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan