This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Matthew Mang
Posted Jul 13 - Read on Facebook

Hey Frameristas!

I'm currently trying to add a scrollable layer that sits on top and can be scrolled over a page component full screen background.

Obviously a scroll component won't work, since it blocks the page component behind it, so I tried messing with the draggable property, but I'm having trouble trying to get the layer to behave like a normal scrollable layer instead of a draggable one.

Any help would be appreciated! Thanks :)

https://framer.cloud/lVSUZ

5 Comments

Bhaskar Ravi

Not at my desk so can't take a look at the code atm but why wouldn't a scroll component work?

Do you want a single unique scroll component all the pages? Or does each page have its own associated scroll component? Because you could just nest a bunch of scroll components in the main page component!

Matthew Mang

I just want a single scrollable element on top of all the pages.

The scroll component doesn't work because it blocks the page component in the background, preventing the horizontal pages from being interactive, even when the scroll content isn't covering the background.

Bhaskar Ravi

So two solutions off the top of my head - but I'd have to tinker to see if either is viable.

First is very hacky. Basically nest a scroll comp in a single page. That's ur scrollable list. When you switch pages, switch the parent of the scroll comp to the new page. Then you should easily be able to scroll and page. Kind of hacky though I don't love it as a solution, but should work.

Second would be to go down the draggable path like you've done, but then have the layer scroll once you get to the top - basically turn scroll on once the layer snaps to the top. Then if u drag down you can close the layer and continue paging.

Hope those make sense! Srry not at my comp otherwise I'd hack away at it!

Matthew Mang

Turns out a scroll component does work, I just had to set the scroll component's clip: false so that the scrollable content can scroll beyond the initial scroll area :)

Blaine Billingsley

I would love to see your final solution if you can!

Read the entire post on Facebook