Prevent swipe action when intended action is scroll

[idrisadetunmbi]

I have a container that is vertically scrollable and also includes a onSwipedUp action. When the container is vertically scrolled, the action gets called but that is not the intention at that point. I know it is possible to track the scrolling and prevent the swipe up action until the container is at scroll end, but is there a prop to achieve this internally?

const handlers  = useSwipeable({ onSwipedUp: () => { /* action gets called on scroll as well */ } })

<div {...handlers} style={{ overflowY: "scroll" }}></div> // container is scrollable but onSwipedUp gets called as well```

[hartzis]

@idrisadetunmbi There is such a prop, preventDefaultTouchmoveEvent, that calls e.preventDefault for touch move events that have an associated swipe handler.

• https://github.com/FormidableLabs/react-swipeable#preventdefaulttouchmoveevent-details

It is not the best named prop, but should accomplish what you're looking for.

Please let me know if this works for your use case. Cheers.

[hartzis]

@idrisadetunmbi We additionally just released v6 which may help with this.

We also added some documentation on possibly using touch-action to prevent scrolling

[diegohaz]

@hartzis I think the question was the opposite: preventing the swipe event when the user is scrolling.

@idrisadetunmbi How did you solve the problem?

[hartzis]

@diegohaz I think you're absolutely right. I dont know where my head was 1½ years ago lol. @idrisadetunmbi apologies for miss-understanding your question.

🤔 though this is still still quite tricky, how do you decipher a swipe intent vs a scroll intent?

Maybe the new swipeDuration i'm working on in v7 could help?

• #291

[arifemir]

is there any solution right now ?

[arifemir]

is there any solution right now ?

i have a solution its little bit awkward:

1. create ref from swipeable element. <SwipeableComp {...handlers} ref={myRef}/>
2. when onTouchMove "scroll component", unload the handler's ref <ScrollingComp onTouchMove={() => handlers.ref()} />
3. fill SwipeableComp with myRef while onTouchMove <SwipeableComp {...handlers} ref={myRef} onTouchMove={() => handlers.ref(myRef)}

[hartzis]

@arifemir Please check out v7.0.0 and the new props to see if they can help out now.

• https://github.com/FormidableLabs/react-swipeable#swipeduration
• https://github.com/FormidableLabs/react-swipeable#toucheventoptions

[moshfeu]

For me it didn't help because there is a visual implication on onSwiping.

https://user-images.githubusercontent.com/3723951/180877643-28cd134e-ad48-43c2-8ae1-ab4804fd7858.mp4

I wish to have a way to prevent swipe up and down which conflicts with vertical scrolling.

I found a way to do it in a hacky way: settings big numbers for delta's up and down. e.g.

delta: {
  up: 1000,
  down: 1000,
},

[guillermodlpa]

Using swipeDuration: 250 combined with onSwipedDown worked perfectly for me, to enable a user to scroll up and down a dialog but also be able to close it by swiping it down. Thanks @hartzis !