jQueryアニメーション中にウィンドウのスクロールを一時的に無効にする方法は?

ウィンドウのスクロールを一時的に無効にする

scrollTo jQuery プラグインを利用する場合、アニメーション中の不要なスクロールを防ぐことは、シームレスなユーザー エクスペリエンスにとって不可欠です。オプションの 1 つは本文のオーバーフローを切り替えることですが、より洗練されたアプローチには、スクロールバーの可視性を維持しながらスクロールバーを無効にすることが含まれます。

解決策: スクロール インタラクションのキャンセル

スクロール イベント自体はキャンセルできません。代わりに、次のようなスクロールをトリガーする特定の操作を防止することを検討してください。

• マウスとタッチ スクロール (モバイル デバイスの場合)
• スクロールに関連付けられたキーボード ボタン (矢印キー、ページ アップなど) down、home、end)

実装

以下の JavaScript コード

// Prevent scroll events
function disableScroll() {
  // Add event listeners for various scroll interactions
  window.addEventListener('DOMMouseScroll', preventDefault, false); // Older Firefox
  window.addEventListener('wheel', preventDefault, { passive: false }); // Modern desktop
  window.addEventListener('touchmove', preventDefault, { passive: false }); // Mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false); // Keyboard
}

// Re-enable scroll events
function enableScroll() {
  // Remove event listeners for scroll interactions
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener('wheel', preventDefault, { passive: false });
  window.removeEventListener('touchmove', preventDefault, { passive: false });
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

// Function to prevent event default action
function preventDefault(e) {
  e.preventDefault();
}

// Function to prevent default for specific keyboard scroll keys
function preventDefaultForScrollKeys(e) {
  const scrollKeys = [37, 38, 39, 40]; // Arrow keys
  if (scrollKeys.includes(e.keyCode)) {
    e.preventDefault();
  }
}

スクロールを無効にするには、disableScroll() を呼び出します。再度有効にするには、enableScroll() を呼び出します。

以上がjQueryアニメーション中にウィンドウのスクロールを一時的に無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。