I am building a VueJS form, which has multiple steps and a back button, to go to the previous step. All steps are managed in a parent component, so the URL / router history does not change with the steps.
So when a user swipes over the edge of their phone the browser navigates to the previous page on the browser history. I want to change this behaviour, so the swipe gesture has the same function as the back button on my form (navigate between form steps, not pages) or is deactivated completely.
I have already tried to
- set
touch-action: none
on the body and html - set
overscroll-behaviour: none
on the body and html - call
preventDefault()
ontouchstart
andtouchmove
However, the swipe behaviour does not seem to be influenced by the web app. Is there any way to prevent the navigation?
I am currently testing on Safari iOS on the xCode simulator, but the desired behaviour would have to work both on iOS and Android.