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

What is Framer? Join the Community
Return to index
Clayton Farr
Posted Oct 03 - Read on Facebook

Hi. I'm running into some trouble trying to sort how to make layers within a PageComponent scrollable.

Currently I have a PageComponent that is setting up content areas for each page and allows switching between them. When the content on those pages is longer than the viewport it cuts off and doesn't allow any scrolling.

I've tried adding a ScrollComponent within each 'page', and also wrapping the page component in a ScrollComponent, neither of which seem to be working. What's the best way to handle something like this?

Attached project has current Page Component setup without any Scroll Components (click on "Logo" to show nav if on smaller screen).



Jonas Treub

Have you seen the Medium example? The most important properties are the directionLock and scroll directions.

Clayton Farr

Thanks for the tip and quick reply Jonas. I'll dig in and see if I can make heads or tails of it.

Clayton Farr

Thanks again Jonas, that helped me figure it out. I had to dumb down your smart code to make out what was happening ;)

Steps –
1. Create master Page Component
2. Create a Scroll Component for each page
3. Place content within each page's Scroll Component
4. Add each Scroll Component as page to the master Page Component

For anyone else that may need the same, here's a simplified example -

One follow-up question – scrolling is now working but it doesn't respond to desktop scroll input (e.g. from a touchpad). It requires you to tap and scroll on the layer. Is there a way to change this to behave naturally in a desktop context?

Jonas Treub

Currently trackpad scrolling is not possible. Eelco has been working on making that possible though.

Clayton Farr

Ah, okay, good to know. Would a user's mouse scroll wheel work as expected?

Read the entire post on Facebook