Bagaimana untuk Melumpuhkan Bar Skrol Semasa Menyimpan Skrol Roda dan Anak Panah?

Melumpuhkan Bar Tatal Semasa Memelihara Fungsi Tatal Roda dan Anak Panah

Meningkatkan pengalaman pengguna dengan melumpuhkan bar skrol sambil mengekalkan fungsi tatal penting boleh dicapai melalui pelbagai teknik . Artikel ini meneroka cara untuk mencapai ini menggunakan JavaScript mentah dan jQuery.

JavaScript Mentah

Untuk melumpuhkan bar skrol dalam JavaScript mentah, gunakan limpahan: sifat tersembunyi:

body {
  overflow: hidden;
}

Untuk meniru tatal dengan roda tetikus, ikat acara roda pada fungsi yang melaraskan tatal Atas nilai:

document.body.addEventListener("wheel", function (e) {
  document.body.scrollTop += e.deltaY;
});

Untuk navigasi kekunci anak panah, ikat acara kekunci bawah untuk mengesan tekanan kekunci dan laraskan tatalKiri dan tatal Atas sewajarnya:

document.body.addEventListener("keydown", function (e) {
  switch (e.keyCode) {
    case 37: // Left arrow
      document.body.scrollLeft -= 10;
      break;
    // Implement other arrow key cases...
  }
});

jQuery

jQuery menyediakan pelaksanaan yang dipermudahkan untuk ini konsep:

// Disable scrollbars
$("body").css("overflow", "hidden");

// Mouse wheel scrolling
$("#example").bind("mousewheel", function (ev, delta) {
    $(this).scrollTop($(this).scrollTop() - Math.round(delta));
});

// Arrow key scrolling
$("body").keydown(function (e) {
    switch (e.keyCode) {
        case 37: // Left arrow
            $(this).scrollLeft($(this).scrollLeft() - 10);
            break;
        // Implement other arrow key cases...
    }
});

Kesimpulan

Dengan menggunakan teknik ini, pembangun boleh memberikan pengalaman pengguna yang lebih intuitif dan menarik secara visual dengan menyembunyikan bar skrol sambil membenarkan pengguna menavigasi kandungan dengan lancar.

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Bar Skrol Semasa Menyimpan Skrol Roda dan Anak Panah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!