是否可以在移动浏览器上停用滑动导航？

Question

我正在构建一个 VueJS 表单，它有多个步骤和一个后退按钮，用于转到上一步。所有步骤都在父组件中进行管理，因此 URL/路由器历史记录不会随步骤而更改。

因此，当用户在手机边缘滑动时，浏览器会导航到浏览器历史记录中的上一页。我想更改此行为，因此滑动手势与表单上的后退按钮具有相同的功能（在表单步骤之间导航，而不是页面之间导航）或完全停用。

我已经尝试过了

• 在 body 和 html 上设置

  touch-action: none

• 在 body 和 html 上设置

  overscroll-behaviour: none

• 拨打

  preventDefault()

  和

  touchstart

但是，滑动行为似乎不受网络应用程序的影响。有什么办法可以阻止导航吗？

我目前正在 xCode 模拟器上的 Safari iOS 上进行测试，但所需的行为必须同时在 iOS 和 Android 上运行。

Answer 1

事件监听器需要

touchmove

作为选项传递。这适用于所有主要的移动浏览器，但 Android 上的 Firefox 除外