一部のWebページでは、iPhoneの左右のスワイプ機能を使用してメニューを表示します。iOS7では、左右のスワイプでブラウザの履歴の前のページと次のページに前後に移動する機能が導入されました。
しかし、スワイプアクションで競合する動作が発生しないように、特定のページで無効にする方法はありますか?
一部のWebページでは、iPhoneの左右のスワイプ機能を使用してメニューを表示します。iOS7では、左右のスワイプでブラウザの履歴の前のページと次のページに前後に移動する機能が導入されました。
しかし、スワイプアクションで競合する動作が発生しないように、特定のページで無効にする方法はありますか?
回答:
いいえ、これはOSレベルで行われ、Webページはコールバックを受け取りません
Webサイトに問題を引き起こす可能性のあるiOS7でのサファリの変更の概要を参照してください(このスワイプジェスチャを含む)
直接無効にすることはできませんが、ブラウザの履歴に何かがある場合にのみ、ネイティブのスワイプバックが発生します。
すべての場合に機能するわけではありませんが、新しいタブで1ページのWebアプリを開いている場合は、を使用して履歴に追加されないようにすることができます。
window.history.replaceState(null, null, "#" + url)
pushStateまたはの代わりに
document.location.hash = url
私は2つのアプローチを使わなければなりませんでした:
1)Chrome / FirefoxのCSSのみの修正
html, body {
overscroll-behavior-x: none;
}
2)SafariのJavaScript修正
if (window.safari) {
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
history.go(1);
};
}
時間の経過とともに、Safariはoverscroll-behavior-xを実装し、JSハックを削除できるようになります。
touchmove
イベントを介してスワイプジェスチャを検出し、直前にスワイプがない場合にのみ上記のコードを実行する必要があります。それは可能であるはずです。
overscroll-behavior-x: none;
iOS 13のChromeでテストしたところ、スワイプナビゲーションの動作に影響はありませんでした。左端を右にスワイプすると元に戻ります(これがタブ履歴の最初のページであっても、ホーム画面に戻ります)。