Can't make backdrop scrollable
GulinaTayier opened this issue · comments
Gi Tayier commented
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>
);
Teemu Taskula commented
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 🙂
Teemu Taskula commented
Closing for missing further info.