ホイールと矢印キーをスクロールしたままスクロールバーを無効にする方法

ホイールと矢印のスクロール機能を維持しながらスクロールバーを無効にする

重要なスクロール機能を維持しながらスクロールバーを無効にしてユーザー エクスペリエンスを向上させることは、さまざまな手法で実現できます。 。この記事では、生の JavaScript と jQuery を使用してこれを実現する方法について説明します。

生の JavaScript

生の JavaScript でスクロールバーを無効にするには、overflow: hidden プロパティを利用します。

body {
  overflow: hidden;
}

マウス ホイールによるスクロールを模倣するには、scrollTop を調整する関数にホイール イベントをバインドします。値:

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 中国語 Web サイトの他の関連記事を参照してください。