Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Melumpuhkan Bar Tatal Semasa Mendayakan Tatal Kekunci Roda dan Anak Panah dengan JavaScript?

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

Susan Sarandon
Lepaskan: 2024-12-10 16:34:11
asal
574 orang telah melayarinya

How to Disable Scrollbars While Enabling Wheel and Arrow Key Scrolling with 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>
Salin selepas log masuk
$("#example").bind("mousewheel", function(ev, delta) {
  var scrollTop = $(this).scrollTop();
  $(this).scrollTop(scrollTop - Math.round(delta));
});
Salin selepas log masuk

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.

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Bar Tatal Semasa Mendayakan Tatal Kekunci Roda dan Anak Panah dengan JavaScript?. 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