Bagaimanakah Saya Boleh Menyembunyikan Bar Skrol Semasa Mengekalkan Fungsi Skrol?

Menyembunyikan Bar Tatal Semasa Mengekalkan KebolehTatal

Dalam senario tertentu, anda mungkin mahu menyembunyikan bar skrol daripada elemen web atau seluruh halaman web sambil masih membenarkan penatalan kefungsian melalui roda tetikus atau kekunci anak panah. Begini cara anda boleh mencapai ini:

Lumpuhkan Bar Tatal Menggunakan CSS

Untuk menghapuskan bar skrol, gunakan sifat CSS berikut:

overflow: hidden;

Ini akan sembunyikan bar skrol untuk elemen yang disasarkan, dengan berkesan menghalangnya daripada muncul. Walau bagaimanapun, kandungan yang melimpah masih boleh diakses.

Tiru Tatal dengan JavaScript

Untuk memulihkan keupayaan menatal, anda mesti mengikat pendengar acara pada acara roda tetikus dan kekunci.

Roda Tetikus Menatal

Menggunakan JavaScript atau pemalam jQuery yang ditunjukkan di bawah, anda boleh mencontohi penatalan dengan mengubah suai sifat tatal atas elemen:

$("#example").bind("mousewheel", function(ev, delta) {
  var scrollTop = $(this).scrollTop();
  $(this).scrollTop(scrollTop - Math.round(delta));
});

Tatal Kekunci Anak Panah

Untuk menyokong penatalan kekunci anak panah, ikat pendengar acara pada kekunci bawah acara:

$(document).keydown(function(event) {
  const{ scrollTop, scrollLeft } = $("#example");
  switch (event.keyCode) {
    case 37: // Left arrow
      $("#example").scrollLeft(scrollLeft - 10);
      break;
    case 38: // Up arrow
      $("#example").scrollTop(scrollTop - 10);
      break;
    case 39: // Right arrow
      $("#example").scrollLeft(scrollLeft + 10);
      break;
    case 40: // Down arrow
      $("#example").scrollTop(scrollTop + 10);
      break;
  }
});

Dengan melaksanakan teknik ini, anda boleh melumpuhkan bar skrol dengan berkesan sambil mengekalkan fungsi penatalan menggunakan roda tetikus atau kekunci anak panah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyembunyikan Bar Skrol Semasa Mengekalkan Fungsi Skrol?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!