スクロール機能を維持したままスクロールバーを非表示にするにはどうすればよいですか?

スクロール機能を維持しながらスクロールバーを非表示にする

特定のシナリオでは、スクロールを許可しながら、Web 要素または Web ページ全体からスクロールバーを非表示にすることができます。マウスホイールまたは矢印キーによる機能。これを実現する方法は次のとおりです。

CSS を使用してスクロールバーを無効にする

スクロールバーを削除するには、次の CSS プロパティを適用します。

overflow: hidden;

これにより、ターゲット要素のスクロールバーを非表示にして、それらが表示されないようにする。ただし、オーバーフローしたコンテンツには引き続きアクセスできます。

JavaScript でスクロールをエミュレートする

スクロール機能を復元するには、イベント リスナーをマウス ホイール イベントとキーダウン イベントにバインドする必要があります。

マウス ホイールスクロール

JavaScript または以下に示す jQuery プラグインを使用すると、要素のscrollTop プロパティを変更することでスクロールをエミュレートできます:

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

Arrow Key Scrolling

矢印キーのスクロールをサポートするには、イベント リスナーを 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 中国語 Web サイトの他の関連記事を参照してください。