I'm trying to prototype a simple Google Maps style interaction, where the map is scrollable in both directions, and the bottom sheet is draggable. Somehow that seems impossible to do?
I've tried 2 main methods:
-
Bottom sheet variants with drag interactions fixed at the top of the map, but the map under it is completely scrollable, so it doesn't read the drag at all. For some unexplainable reason, Figma doesn't treat the top layer as top, and allows everything under to scroll.
-
I tried treating the bottom sheet as an overlay, but then everything else becomes unclickable, which also is unintended.
Have been through community files and YT videos but either their content doesn't scroll in both directions or they use overlays, both of which don't solve my problem.
Has anyone worked around this before? I want the map to scroll and the bottom sheet to be draggable. Thanks in advance!
Hereโs the file with method 1 (try using it on phone)