iOS 7-Safariで前後にスワイプする機能を無効にする方法はありますか?


83

一部のWebページでは、iPhoneの左右のスワイプ機能を使用してメニューを表示します。iOS7では、左右のスワイプでブラウザの履歴の前のページと次のページに前後に移動する機能が導入されました。

しかし、スワイプアクションで競合する動作が発生しないように、特定のページで無効にする方法はありますか?


画面外でスワイプを開始することで区別する必要があります。競合が発生するWebページの例はありますか?
Rupert Rawnsley 2013

@RupertRawnsley console.log( 'FIRED!');を使用してWebページにtouchstart / touchmoveイベントを追加します。初期化。端からWebページに指を移動すると、イベントが発生しないことがわかります。これが新しい期待される動作になると私は思いますか?
マーカス

2
+1これ。スワイプしてメニューを開くと面倒です。
TYRONEMICHAEL 2013年

2
+1ユーザーは、オフスクリーンスワイプとオンスクリーンスワイプが何であるかを知りません。ブレル!
Joseph Juhnke 2014年

1
視力の弱いユーザーとして、私は大きくズームしてパンする必要があります。そのスワイプバックジェスチャは私を狂気に駆り立てます。誰かがそれを無効にする方法を知っているなら、私は知りたいです。
ブレットライアン

回答:



12

直接無効にすることはできませんが、ブラウザの履歴に何かがある場合にのみ、ネイティブのスワイプバックが発生します。

すべての場合に機能するわけではありませんが、新しいタブで1ページのWebアプリを開いている場合は、を使用して履歴に追加されないようにすることができます。

window.history.replaceState(null, null, "#" + url)

pushStateまたはの代わりに

document.location.hash = url

5
はい。ただし、これにより、ナビゲート時にアプリ自体の履歴のみが防止されます。他のアプリも履歴をプッシュしている可能性があるため、iOSはそれらの履歴も検出します。
男2015年

6

私は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ハックを削除できるようになります。


私はこれを追加しましたが、Macでは、左スワイプがトリガーされるのを防ぎます。ただし、戻る機能([戻る]ボタンを含む)が完全に機能しなくなるため、回避策として使用することはできません。
–ŠimeVidas 2018

私の場合、シングルページアプリを構築していたときの目標でした
John Doherty

2
ただし、誰かが別のWebサイトのリンクをクリックしてアプリを開く可能性はあります(つまり、そのサイトがアプリにリンクしている場合)。これを修正するには、touchmoveイベントを介してスワイプジェスチャを検出し、直前にスワイプがない場合にのみ上記のコードを実行する必要があります。それは可能であるはずです。
サイムVIDAS

これを更新して、ChromeとFirefoxのCSSのみのオプションを追加しました
John Doherty

これはiOSで動作しますか?overscroll-behavior-x: none;iOS 13のChromeでテストしたところ、スワイプナビゲーションの動作に影響はありませんでした。左端を右にスワイプすると元に戻ります(これがタブ履歴の最初のページであっても、ホーム画面に戻ります)。
naktinis
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.