JavaScript でホイールと矢印キーのスクロールを有効にし、スクロールバーを無効にする方法

JavaScript でスクロールバーを無効にするが、ホイールと矢印キーのスクロールは許可する

多くのアプリケーションでは、スクロールバーをビューポートまたは特定の要素から無効にする機能が必要です。ユーザーがマウス ホイールまたは矢印キーを使用してスクロールできるようにします。この効果を実現するには、JavaScript と CSS を組み合わせる必要があります。

スクロールバーを無効にするには、CSS プロパティの overflow: hidden を設定します。これにより、水平スクロールバーと垂直スクロールバーの両方が表示されなくなります。

マウス ホイール スクロールの場合は、イベント リスナーをターゲット要素にバインドします。イベント ハンドラー内で、scrollTop を使用して現在のスクロール位置を計算し、マウス ホイール イベントからのデルタ値に基づいて動的に調整します。

矢印キーのスクロールの場合は、キーストロークを処理するために keydown リスナーをアタッチします。矢印キー イベントをキャプチャし、scrollTop とscrollLeft を使用して要素をそれに応じて移動します。矢印キーの処理は、すべてのブラウザのキー押下でサポートされているわけではないことに注意してください。代わりに keydown を使用してください。

たとえば、jQuery とマウスホイール プラグインを使用してマウス ホイール スクロールを処理する方法は次のとおりです。

<div>
<pre class="brush:php;toolbar:false">$("#example").bind("mousewheel", function(ev, delta) {
  var scrollTop = $(this).scrollTop();
  $(this).scrollTop(scrollTop - Math.round(delta));
});

必要に応じて、この例の値を調整します。必要な CSS および JavaScript 参照を忘れずに含めてください。これらのテクニックを組み合わせることで、スクロールバーが表示されないインタラクティブなスクロール エクスペリエンスを作成できます。