Closed jeremiasjutz closed 1 year ago
This seems to be a duplicate of https://github.com/Temzasse/react-modal-sheet/issues/122 🤔
Unfortunately scrolling in conjunction with dragging is kindah an unsolved problem on the web 😿 If you have any suggestion for solving this problem that would be welcome 🙏🏻 You can try disabling dragging on the sheet body and allow dragging only from the sheet header.
I want my sheet to snap as high as possible, so I use the snapPoint 1, yet I can't get my to snap to 100%.
Here is my config:
If I set my initialSnap to index 0, then initially it works as expected, but as soon as I start scrolling my content inside the sheet (no matter if up or down) it immediately snaps to index 1 and never lets me snap to index 0 again.
The children of my sheet look like this:
If I set my snapPoint at index 0 to -50 it works, but I would like to use as much space as possible.
But then comes my next problem. When the sheet is at the top most snapPoint, i can't scroll my content anymore. It seems to try to close the sheet for a split second but then resets the position to the snapPoint. At this snapPoint my scrollable content is unusable.
Reproducible Example (both the snapPoint 1 and scrollProblem): (tested on iPhone 13 / Safari)
Just change the first snapPoint to 1 to see the snapping Problem https://codesandbox.io/s/vigilant-rain-sgclfo?file=/src/App.js https://sgclfo.csb.app/
Video
Here you can see, when the sheet is opened, I can't scroll the content anymore. I seem to have everything like the scrollable+snappoints example.
https://user-images.githubusercontent.com/31439896/222111780-a57bbbf5-8693-4c11-9a2a-6065e4376d20.mov
framer-motion: 10.0.1 (also tested with 8.4.3 and 9.0.7) react-modal-sheet: 1.10.1