Temzasse / react-modal-sheet

Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐
https://temzasse.github.io/react-modal-sheet/
MIT License
791 stars 75 forks source link

Scrolling & Snap points: Unable to scroll to bottom while snap #58

Closed olifg closed 2 years ago

olifg commented 2 years ago

Hi! First of all, thank you for this awesome library 🤘 I'm having an issue with the scroll behaviour and was wondering if you have any idea on how to solve this.

I have a modal-sheet with 2 positions: 'Full' screen and half screen. snapPoints = [-50, 0.5]. Inside the modal-sheet there's content with a height that's smaller than the 'full' screen modal-sheet, but bigger than the half screen modal-sheet. This results in the content not being scrollable while the modal-sheet is in half screen since the content isn't really overflowing.

Do you have any idea on how to make that work?

Thank you in advance.

marcinbittel commented 2 years ago

I had slightly different but similar issue with scrollable element. It scrolled properly only when snapPoint was higher than half of the screen.

In my scenario I used react-modal-sheet v1.4.2 and framer-motion 5.x.x - tried many versions, like 5.0.0 or 5.6.0. I also wanted to try framer-motion v6.0.0 which was released yesterday but it is not supported by react-modal-sheet yet.

However, it seems like framer-motion issue. In my scenario, installing framer-motion to the highest possible 4.x.x version eliminated the issue.

npm i framer-motion@4.1.17

Temzasse commented 2 years ago

Okay I finally had some time to tackle this issue 😄

I thought about this use case and I came to the conclusion that the lib should not handle this automatically but instead I have now exposed the internal y motion value in the latest version of the lib (v1.5.0) that you can use to resolve this issue.

Please take a look at the updated readme for more info and/or check the working example app solution here.

I hope this solves your issue and feel free to reopen this issue if it doesn't 🙂