Bagaimana untuk Melumpuhkan Bar Tatal Semasa Mendayakan Tatal Kekunci Roda dan Anak Panah dengan JavaScript?

Lumpuhkan Bar Tatal tetapi Benarkan Tatal Kekunci Roda dan Anak Panah dengan JavaScript

Banyak aplikasi memerlukan keupayaan untuk melumpuhkan bar skrol dari paparan atau elemen tertentu semasa membenarkan pengguna menatal dengan roda tetikus atau kekunci anak panah. Untuk mencapai kesan ini memerlukan gabungan JavaScript dan CSS.

Untuk melumpuhkan bar skrol, tetapkan limpahan sifat CSS: tersembunyi. Ini akan menghalang penampilan kedua-dua bar skrol mendatar dan menegak.

Untuk menatal roda tetikus, ikat pendengar acara pada elemen sasaran. Dalam pengendali acara, kira kedudukan skrol semasa menggunakan scrollTop dan laraskannya secara dinamik berdasarkan nilai delta daripada acara roda tetikus.

Untuk menatal kekunci anak panah, pasangkan pendengar kekunci bawah untuk mengendalikan ketukan kekunci. Tangkap peristiwa kekunci anak panah dan gunakan scrollTop dan scrollLeft untuk mengalihkan elemen dengan sewajarnya. Ambil perhatian bahawa pengendalian kekunci anak panah tidak disokong oleh tekanan kekunci dalam semua penyemak imbas; keydown hendaklah digunakan sebaliknya.

Sebagai contoh, berikut ialah cara mengendalikan tatal roda tetikus menggunakan jQuery dan pemalam roda tetikus:

<div>
<pre class="brush:php;toolbar:false">$("#example").bind("mousewheel", function(ev, delta) {
  var scrollTop = $(this).scrollTop();
  $(this).scrollTop(scrollTop - Math.round(delta));
});

Laraskan nilai dalam contoh ini mengikut keperluan, dan jangan lupa sertakan rujukan CSS dan JavaScript yang diperlukan. Dengan menggabungkan teknik ini, anda boleh mencipta pengalaman menatal interaktif tanpa bar skrol yang kelihatan.