如何在保持滾動功能的同時隱藏滾動條？

在保持可滾動性的同時隱藏滾動條

在某些情況下，您可能希望在網頁元素或整個網頁中隱藏滾動條，同時仍允許滾動透過滑鼠滾輪或箭頭鍵實現功能。以下是實現此目的的方法：

使用CSS 停用捲軸

要消除捲軸，請套用下列CSS 屬性：

overflow: hidden;

這將隱藏目標元素的捲軸，有效防止它們出現。但是，溢出的內容仍然可以存取。

使用 JavaScript 模擬滾動

要恢復滾動功能，您必須將事件偵聽器綁定到滑鼠滾輪和按鍵事件。

滑鼠滾輪滾動

使用如下所示的JavaScript或jQuery插件，您可以透過修改元素的scrollTop屬性來模擬滾動：

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

箭頭鍵捲動

要支援箭頭鍵捲動，請將事件偵聽器綁定到keydown事件：

$(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;
  }
});

透過實作這些技術，您可以有效地停用捲軸，同時使用滑鼠滾輪或箭頭鍵保留滾動功能。

以上是如何在保持滾動功能的同時隱藏滾動條？的詳細內容。更多資訊請關注PHP中文網其他相關文章！