ブラウザの履歴ナビゲーションで左から右にスワイプする動作を停止する方法


  1. preventDefaultメソッドを使用する方法: 以下のコードを使用して、ブラウザのタッチイベントをキャンセルし、スワイプによる履歴ナビゲーションを停止します。

    document.addEventListener('touchmove', function(event) {
     event.preventDefault();
    }, { passive: false });

    このコードは、touchmoveイベントが発生した場合にそのデフォルトの動作をキャンセルし、スワイプによる履歴ナビゲーションを防止します。

  2. タッチイベントのキャプチャリングを使用する方法: 以下のコードを使用して、ブラウザのタッチイベントをキャプチャリングし、スワイプによる履歴ナビゲーションを停止します。

    document.addEventListener('touchstart', function(event) {
     event.preventDefault();
    }, { passive: false });
    document.addEventListener('touchmove', function(event) {
     event.preventDefault();
    }, { passive: false });

    このコードは、touchstartおよびtouchmoveイベントをキャプチャリングし、デフォルトの動作をキャンセルします。

  3. CSSのoverscroll-behaviorプロパティを使用する方法: CSSのoverscroll-behaviorプロパティを使用すると、スクロール領域の端でのスクロール動作をカスタマイズできます。以下のCSSを使用して、スワイプによる履歴ナビゲーションを停止します。

    html, body {
     overscroll-behavior: none;
    }

    このCSSは、htmlおよびbody要素でスクロール動作を無効にします。

これらの方法を試してみて、ブラウザの履歴ナビゲーションでのスワイプを停止することができるかどうか確認してください。ただし、特定のブラウザやデバイスによっては、これらの方法が機能しない場合があります。