iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

ios safari ios7

For some web pages we use the swipe left and right functionality of iPhone to pull up the menus. Now with iOS7, they have introduced the ability to go back and forward to previous and next pages of browser history on swipe left and right motions.

But is there a way to disable it for specific pages so as to not have conflicting behavior on the swipe actions?

It should be distinguished by the swipe starting offscreen. Do you have an example webpage where a conflict occurs?

@RupertRawnsley Add a touchstart/touchmove event to your web page with a console.log('FIRED!'); in it. Move your finger onto the web page from the edge and you will notice the event never fires. Am I right in assuming that this will be the new expected behavior?

+ 1 for this. Troublesome when you swipe to open a menu.

+1 The user has no idea what a offscreen swipe versus an onscreen swipe is. Blergh!

As a user with poor eyesight I need to zoom a lot and pan, that swipe back gesture drives me insane. If anyone knows how to disable it I want to know.

Vinzzz

No, this is done at the OS level, and webpage doesn't get any callback

See this summary of safari changes in iOS7 that might cause problems to your website (including this swipe gesture)

Tom Clarkson

You can't disable it directly, but the native swipe back only happens if there is something in the browser history.

It won't work in every case, but if you have a single page web app opened in a new tab, you can prevent it from adding to the history by using

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

instead of pushState or

document.location.hash = url

Yes but this prevents only the history in the app itself when navigating. Other apps may also have pushed a history, therefore iOS will detect those histories too.

John Doherty

I had to use 2 approaches:

1) CSS only fix for Chrome/Firefox

html, body {
    overscroll-behavior-x: none;
}

2) JavaScript fix for Safari

if (window.safari) {
    history.pushState(null, null, location.href);
    window.onpopstate = function(event) {
        history.go(1);
    };
}

Over time, Safari will implement overscroll-behavior-x and we'll be able to remove the JS hack

I added this and on Mac, it does prevent a left swipe from triggering back. However, it breaks the back functionality completely (incl. the Back button), so it can’t be used as a workaround.

In my case that was the goal as I was building a single page app

But it’s still possible that someone opens your app by clicking on a link on another website (i.e., if that site links to your app). To fix this, you’d still have to detect swipe gestures via touchmove events and only execute the above code if it wasn’t immediately preceded by a swipe. It should be possible.

I've updated this to include a CSS only option for Chrome and Firefox

@naktinis on iOS is everything Safari under the hood so it won't work on it.

iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US