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
783 stars 74 forks source link

Can't make backdrop scrollable #124

Closed GulinaTayier closed 9 months ago

GulinaTayier commented 1 year ago

I set the modal sheet only to appear at the page bottom ~200px, and still want the backdrop scrollable, I used the exposed class names.o override the style but still not working.

.react-modal-sheet-backdrop {
    overflow-y: scroll !important;
    background-color: transparent !important; 
    touch-action: auto !important; 
    pointer-events: auto !important; 
  }
             <Sheet
                ref={sheetRef}
                isOpen={isOpen}
                onClose={handleDismiss}
                initialSnap={INITIAL_SNAP}
                snapPoints={SNAP_POINTS}
                onSnap={setSnapPoint}
                springConfig={DEFAULT_BOTTOM_SHEET_ANIMATION}
                style={{ zIndex: 0 }}
            >
                <Sheet.Container>
                    <Sheet.Header />
                    <Sheet.Header disableDrag>
                    <CustomHeaderComponent />
                    </Sheet.Header>
                    <Sheet.Content
                        disableDrag
                        style={{
                            paddingBottom: (
                                sheetRef as MutableRefObject<SheetRef>
                            )?.current?.y,
                        }}
                    >
                         <CustomComponent />
                    </Sheet.Content>
                </Sheet.Container>
                <Sheet.Backdrop />
            </Sheet>
        );
Temzasse commented 1 year ago

Could you elaborate on your use case a bit more? Why do you want to have the backdrop scrollable?

If you want the content behind the sheet to be scrollable you can omit rendering the backdrop 🙂

Temzasse commented 9 months ago

Closing for missing further info.