ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryのscrollToアニメーション中にスクロールを一時的に無効にするにはどうすればよいですか?

jQueryのscrollToアニメーション中にスクロールを一時的に無効にするにはどうすればよいですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-20 01:57:09798ブラウズ

How Can I Temporarily Disable Scrolling During jQuery scrollTo Animations?

jQuery のscrollToアニメーション中のスクロールを一時的に無効にする

jQueryのscrollToプラグインを利用する場合、スクロールによりアニメーションの滑らかさが損なわれる可能性があります。単にスクロールバーを非表示にするという方法もありますが、より良い解決策は、スクロール イベントの可視性に影響を与えずに一時的にスクロールを無効にすることです。

解決策

スクロール イベントのみをターゲットにするのではなく、重要なのは、マウス、タッチ、ボタンのスクロールなどの関連するインタラクション イベントもキャンセルすることです。使用できるスクリプトは次のとおりです:

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

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

これで、disableScroll() を呼び出してスクロールを無効にし、必要に応じてenableScroll() で再度有効にすることができます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。