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

What is Framer? Join the Community
Return to index
Camille Zapata
Posted Apr 25 - Read on Facebook

Hi, I have a horizontally scrolling PageComponent inside another Horizontal PageComponent. How can I lock the parent PageComponent (so it doesn't scroll as I scroll through the nested pagecomponent)?

I've tried using "directionlock" but it doesn't seem to be fixing my issue.

Thanks!

3 Comments

Jonas Treub

Hi Camille! The directionlock property only works when the two PageComponent or ScrollComponents scroll in a different direction. To get it working when both scroll in the same direction is a bit more work. Here is an example: https://framer.cloud/OhOph

Kevin Mao

I added

subScroll.propagateEvents = false

to Jonas' example and that lets you remove the last three touch and scroll events. I think that one line is all you need. Let me know if that works for you!
Jonas, is this a better way?

Jonas Treub

Kevin. Yeah! That's the right property. Thnx :)

I also kept the touchStart event to check if the main scrollComponent isn't finishing a bounce animation. If not I stop it from scrolling.

https://framer.cloud/OhOph

Read the entire post on Facebook