Skip to content

Conditional scroll does not work after snaps #221

@fxxholub

Description

@fxxholub

Problem
The disableScroll={(state) => {return state.currentSnap !== snapPoints.length-1}} does not work when snapping down and up again.

Setup
I have sheet with static content with one added snap point (snapPoints = [0, 80, 1])

fully open (snap point index 2 (1)):
Image

snapped to index 1 (80):
Image

Symptoms
When the page is loaded, the content scrolling works. When snapped from 1 to 80 and back to 1, the scrolling stops working.

I have found out the overflow-y goes hidden after snapping down, but wont go back to auto when snapped back to 1.

Code

<Sheet
      isOpen={true}
      disableDismiss
      detent="content"
      snapPoints={snapPoints}
      initialSnap={snapPoints.length-1}
      disableScrollLocking
      onClose={() => ({})}
      unstyled
      className="!z-20 mx-2 mb-2 rounded-[40px] max-w-[414px]"
      tweenConfig={{ ease: 'easeInOut', duration: 0.3 }}
      >
      <Sheet.Container className={"rounded-[40px] "+baseClassName}>
        <Sheet.Header>
          <div className="pt-2 flex flex-col">
            <div className="flex justify-center">
              <div className="h-1 w-12 rounded-full bg-black/30" />
            </div>
          </div>
        </Sheet.Header>
        <Sheet.Content disableScroll={(state) => {console.log(snapPoints.length-1, state.currentSnap, snapPoints, state.currentSnap ? snapPoints[state.currentSnap] : "no curr snap"); return state.currentSnap !== snapPoints.length-1}}>
          {children}    
        </Sheet.Content>
      </Sheet.Container>
    </Sheet>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions