search

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
828 stars 78 forks source link

How could I make the sheet not disappear when I scroll down? #87

Closed franmc01 closed 1 year ago

franmc01 commented 2 years ago

What I am looking for is that when I scroll down the sheet returns to the initial position and cannot be hidden

FnugDev commented 2 years ago

What I am looking for is that when I scroll down the sheet returns to the initial position and cannot be hidden

did u find a fix?

Temzasse commented 1 year ago

If you don't mind losing draggability for the Sheet.Content then you can pass disableDrag to it to disable all dragging gestures for the content part of the sheet. The header will still be draggable.

<Sheet>
  <Sheet.Container>
    <Sheet.Header />
    <Sheet.Content disableDrag>
      {/* ... */}
    </Sheet.Content>
  </Sheet.Container>
</Sheet>

Not sure if Framer Motion is able to handle both vertical scrollability and draggability for the content without occasionally mixing those two type of gesture events. If you think about it scrolling down is basically the same gesture as dragging down.