Prevent Navigation Gestures on mobile?

[niklasgrewe]

Hi, thank you very much for this handy library to work with gestures 👍 I am looking for a solution to prevent the default swipe-back gestures on mobile browsers such safari on iOS. Is there a way to block these navigation gestures using your library to get a result like this?

I try something like this, but it doesn't work:

<script>
   import { swipe } from 'svelte-gestures'
</script>

<div use:swipe={{ timeframe: 300, minSwipeDistance: 60, touchAction: 'pan-y' }} class="h-screen w-screen bg-red-100">
  <!-- child elements -->
</div>

but when i am using this code, it works (but i also lost the functionality to swipe up and down for scrolling)

<div on:touchstart|preventDefault class="h-screen w-screen bg-red-100">
  <!-- child elements -->
</div>

[Rezi]

Here is a solution, you can combine the pan actions when separated by space https://svelte.dev/repl/7a7134ca25e340a5850f4a44628dce03?version=3.38.2 there are two solutions based on what you want. I would not recommend to block the up and down scrolling. So for your case you would be limited to swipe right only. Let me know if this solution is acceptable for you. So I can close the issue

[Rezi]

The touch action which is passed into the directive is actually name of a css property https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action. By default there is 'none'. It means browser handle no touch actions on this element and they are handled by your custom JS. Unfortunately I can see that Safari only implements pan-x and pan-y, all other values like pan-right etc are not supported. I dont see a way to fix it. If you do, please create a PR.