Currently, I am in the process of creating a VueJS form that consists of multiple steps and includes a back button for navigating to the previous step. The steps are all managed within a parent component, which means that the URL and router history remain unchanged throughout the form.
One issue I am facing is that when a user swipes on their phone screen, the browser automatically navigates to the previous page in the browsing history. Ideally, I would like to modify this behavior so that the swipe gesture functions the same as the back button on my form (allowing users to navigate between form steps rather than pages) or disable it entirely.
Attempts to address this issue have included:
- Applying
touch-action: noneto the body and html elements - Setting
overscroll-behaviour: noneon the body and html tags - Using
preventDefault()on bothtouchstartandtouchmove
Despite these efforts, it appears that the swipe behavior remains unaffected by the web application. Is there a solution available to prevent unwanted navigation from occurring?
As of now, I am conducting tests on Safari iOS using the xCode simulator; however, any solution should be compatible with both iOS and Android devices.