ユーザーエクスペリエンスを向上させるために、JavaScript のスクロールを一時的に無効にするにはどうすればよいですか?

シームレスなユーザー エクスペリエンスのために Javascript でスクロールを一時的に無効にする

スクロールを一時的に停止すると、次のようなアニメーションを操作するときのユーザー エクスペリエンスが向上します。 jQueryのscrollToプラグイン。スクロールを完全に無効にするのは単純な解決策のように思えるかもしれませんが、インタラクションを防止しながらスクロールバーの表示を維持することは、より洗練されたアプローチとなります。

これを実現するには、関連するインタラクション イベントのキャンセルに焦点を当てます。マウスとタッチ スクロールの両方 (キーボード ボタンを含む)。

[作業中]デモ]

// Event Codes for Navigation Keys
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

// Prevent Default Scrolling
function preventDefault(e) {
  e.preventDefault();
}

// Cancel Scrolling for Navigation Keys
function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

// Disable Scrolling
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // Firefox
  window.addEventListener('wheel', preventDefault, false); // Desktop
  window.addEventListener('touchmove', preventDefault, false); // Mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false); // Keyboard
}

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

disableScroll() を呼び出すことで、scrollTo アニメーションの進行中のスクロールを効果的に防止します。アニメーションが完了したら、enableScroll() を使用してスクロール機能を復元できます。

更新: サポートの強化

このソリューションは、最新のモバイルでシームレスに動作するように更新されました。ブラウザと Chrome デスクトップ。パフォーマンスとユーザーの応答性を維持するために、パッシブ リスナーが組み込まれるようになりました。

以上がユーザーエクスペリエンスを向上させるために、JavaScript のスクロールを一時的に無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。