スクロールバーを非表示にせずに、JavaScript でスクロールを一時的に無効にする方法

スクロールを一時的に無効にする方法

scrollTo jQuery プラグインの使用中にスクロールを一時的に無効にする 1 つの方法は、「本文」の CSS を調整することです。 " 要素。ただし、この方法ではスクロールバーが非表示になる可能性があり、望ましくない場合があります。

より効果的な解決策は、特定のインタラクション イベントがスクロールをトリガーしないようにすることです。これらのイベントには以下が含まれます:

• マウス スクロール
• タッチ スクロール
• スクロールに関連付けられたボタン

このソリューションを実装するには、次を使用できます。次の JavaScript コード:

// Disable scrolling
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener('wheel', preventDefault, { passive: false }); // modern desktop
  window.addEventListener('touchmove', preventDefault, { passive: false }); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// Enable scrolling
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener('wheel', preventDefault, { passive: false }); 
  window.removeEventListener('touchmove', preventDefault, { passive: false });
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

このコードはウィンドウにイベント リスナーを設定します要素を使用して、デフォルトのスクロールアクションがトリガーされないようにします。スクロールを無効にする必要がある場合は、disableScroll() 関数を呼び出します。スクロールを再度有効にするには、enableScroll() 関数を呼び出します。

この方法により、スクロールバーは表示されたままになりますが、スクロールには使用できなくなります。また、幅広いブラウザで動作します。

以上がスクロールバーを非表示にせずに、JavaScript でスクロールを一時的に無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。