Repository navigation
Prevent swipe action when intended action is scroll #194
Description
Activity
@idrisadetunmbi There is such a prop,
preventDefaultTouchmoveEvent, that callse.preventDefaultfor touch move events that have an associated swipe handler.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.
@idrisadetunmbi We additionally just released v6 which may help with this.
We also added some documentation on possibly using touch-action to prevent scrolling
@hartzis I think the question was the opposite: preventing the swipe event when the user is scrolling.
@idrisadetunmbi How did you solve the problem?
Reacted by Arif Emir Arslanturk, Elina Shelest, Dmitriy Smirnov, Manu Viswam, Renan Coelho, David Brouwer and Igor Kesler@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
swipeDurationi'm working on in v7 could help?Reacted by Mosh Feu and Elina Shelestis there any solution right now ?
is there any solution right now ?
i have a solution its little bit awkward:
- create ref from swipeable element.
<SwipeableComp {...handlers} ref={myRef}/> - when onTouchMove "scroll component", unload the handler's ref
<ScrollingComp onTouchMove={() => handlers.ref()} /> - fill SwipeableComp with myRef while onTouchMove
<SwipeableComp {...handlers} ref={myRef} onTouchMove={() => handlers.ref(myRef)}
- create ref from swipeable element.
For me it didn't help because there is a visual implication on
onSwiping.ezgif.com-gif-maker.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, },
Reacted by Manolis Papadospyridakis and BoraVivek-FurrlUsing
swipeDuration: 250combined withonSwipedDownworked 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 !Reacted by (Brian) Emil HartzReacted by (Brian) Emil HartzReacted by (Brian) Emil Hartz and Junaid Faryad
I have a container that is vertically scrollable and also includes a
onSwipedUpaction. 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?