swipeable: avoiding conflict with default scroll

[MadeInPierre]

Hello @vnphanquang! Loving the swipeable module, thank you.

I'm having a UX issue on mobile for an X-axis-only element (my goal is to implement a simple "swipe-to-delete" gesture). The current version seems to immediately disable page scrolling too. Demo:

swipeable_mobile_yscroll.mp4

I tried setting disableTouchEvents to false but it replaces the scrolling issue with unpredictable swiping behavior.

Happy to try a PR if you have an implementation recommendation? Would be great to (1) set a startThreshold, (2) only start setting --swipe-distance-x after startThreshold, and (3) only apply touch-none after startThreshold. Maybe even completely disable the swipe once a vertical scroll is registered?

Thank you!

[vnphanquang]

Hi @MadeInPierre, thanks for reporting and for diving into the code.

I believe the issue can be solved with by setting touch-action to pan-y on each item.

I've been meaning to add some note about this in the docs but haven't found time. Can you give it a try and let me know? Thanks

[vnphanquang]

The automatic touch-action setting can arguably set pan-x / pan-y depending on the configured direction instead of none as right now.

[MadeInPierre]

Oh, love those simple solutions :) Worked like a charm with the following code:

<div
	use:swipeable={{ direction: 'x', disableTouchEvents: false }}
	style:left="var(--swipe-distance-x)"
	style="touch-action: pan-y;"
	onswipestart={swipestart}
	onswipeend={(e) => swipeend(e, meal.id)}
>
   ...
</div>

I'm still seeing micro-movements however when scrolling, the element moves by a few pixels horizontally and stays like that even after mouseup. We're 90% there, not sure if a fix is worth it.

Thank you for your quick reply. Cheers!

[vnphanquang]

I"m glad that helps.

I'm still seeing micro-movements however when scrolling, the element moves by a few pixels horizontally and stays like that even after mouseup. We're 90% there, not sure if a fix is worth it.

I'm sure some improvements can be made. startThreshold is a good direction, I also think the algorithm can be smarter depending on the first few movements. Will have a look when I can find time. Let's keep this open for a little while.