Help: Bottom action sheet to support scrolling

[elitenoire]

From the gesture example of the action sheet, how can I expand it to support content that scrolls/overflow.
I've tried but the drag gesture gets triggered before scroll gesture so there's a jerk.
I want drag to stop while scrolling the content.
codesandbox demo

[dbismut]

I'll have to think about this. I understand the use case. Possibly interacting with scroll would be simpler than try to do it with drag...

[dbismut]

Hey @elitenoire I was sort of waiting for the use case that would make me regret moving to PointerEvents and here it is (I'm half serious tho, PointerEvents make 90% of use cases easier to manage).

Since PointerEvents get canceled as soon as the scroll is detected (that's a browser "feature"), the general recommendation is to use touch-event: none. But then you can't scroll at all which misses the point completely. So we're stuck and there's at the moment 2 solutions.

• The easiest: use v7.x of 'react-use-gesture'.
• The hardest: fake the scroll: you rely on drag bounds and rubberbanding options and try to implement an inertia with react-spring. Would be easier if react-spring had an inertia setting tbh. Possibly not ideal anyway, and there's no way to reach the same level of "nativeness" that you would get using a scrolling div.

Anyway, I realise this is a common gesture people want to implement I'll see what I can do to add an option to revert to TouchEvents that don't get canceled when scrolling.

[elitenoire]

Thank you for looking into this. I'm still using v7 in the actual implementation and still get results as the codesandbox in the sense that drag occurs before scroll gesture (I also tried the delay option for drag). If possible to show an example using the easiest means, I would appreciate your efforts.

[dbismut]

Hi @elitenoire unfortunately I can't support v7, v8 is giving me enough headaches like this. But I've added a feature in v8.1.0-beta.6 to help you achieve what you need with { useTouch: true }. This will use PointerEvents on desktop but touch on touch-enabled devices.

It's far from perfect but have a look at this. It seems to be working fine on my iPad, but there's a bug on my iPhone that I can't locate at this point.

https://codesandbox.io/s/action-sheet-forked-sg6de