Prevent Swiping Between Web Pages in iPad Safari

Prevent swiping between web pages in iPad Safari

In iOS 13.4+ you can now preventDefault on "touchstart"

Let's say we have a <div class="block-swipe-nav"> on the page that spans the entire width of the viewport and we want to prevent swipe navigation on that element.

const element = document.querySelector('.block-swipe-nav');

element.addEventListener('touchstart', (e) => {

    // is not near edge of view, exit
    if (e.pageX > 10 && e.pageX < window.innerWidth - 10) return;

    // prevent swipe to navigate gesture
    e.preventDefault();
});

I've written a short article on blocking swipe with some additional information.

Any way to prevent Safari edge swipe (on iPhone, for example)?

I don't think it can be done since it is an OS level feature. As long as the swipes initiate inside the web page, there should not be any issue. If you have sufficient margin from the edge, then it should not be a problem.

ipad safari: disable scrolling, and bounce effect?

This answer is no longer applicable, unless you are developing for a very old iOS device... Please see other solutions

---

2011 answer: For a web/html app running inside iOS Safari you want something like

document.ontouchmove = function(event){
    event.preventDefault();
}

For iOS 5 you may want to take the following into account: document.ontouchmove and scrolling on iOS 5

Update September 2014:
A more thorough approach can be found here: https://github.com/luster-io/prevent-overscroll. For that and a whole lot of useful webapp advice, see http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

Update March 2016: That last link is no longer active - see https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html for the archived version instead. Thanks @falsarella for pointing that out.

What causes some iOS web pages to not continue scrolling when swiping finger is released?

You mentioned you aren't using any libraries to do JS scrolling, but it looks like one of the libraries you're including (Polymer I believe) is taking over scrolling.

To confirm this, use the Safari Web Inspector and disable javascript - you'll see that your sample page will no longer scroll at all.

Disable pull-to-refresh in iOS 15 Safari

Ths 2013 library called iNoBounce (https://github.com/lazd/iNoBounce) actually still does the trick pretty well on iOS 15.

Straightforward replication of the example in the documentation did disable the pull to refresh.

---

Related Topics