如何在保持滾輪和箭頭鍵滾動的同時停用捲軸？

停用捲軸同時保留滾輪和箭頭滾動功能

透過停用捲軸同時保留基本滾動功能可以透過各種技術來實現增強使用者體驗。本文探討如何使用原始 JavaScript 和 jQuery 來實現此目的。

原始 JavaScript

要停用原始 JavaScript 中的捲軸，請利用溢位：隱藏屬性：

body {
  overflow: hidden;
}

要模仿滑鼠滾輪滾動，請將滾輪事件綁定到調整滾動頂部的函數value:

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

對於箭頭鍵導航，綁定 keydown事件來偵測按鍵，並相應調整scrollLeft和scrollTop：

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為這些提供了簡化的實作概念：

// 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...
    }
});

結論

透過採用這些技術，開發人員可以隱藏捲軸，同時允許使用者瀏覽內容，從而提供更直覺、更具視覺吸引力的使用者體驗無縫銜接。

以上是如何在保持滾輪和箭頭鍵滾動的同時停用捲軸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！