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

What is Framer? Join the Community
Return to index
Katherine Martinez
Posted Jul 31 - Read on Facebook

Hi, I am trying to get the height for a ScrollComponent's content when it is not explicitly defined. I initially created a scroll component and set it's height to use Screen.height. Within that scroll component I added a bunch of thumbnail images and set parent to scroll.content. After enough images were added to the scroll content, the height exceeded past the scroll component height and was masked properly. However, when I try to get the scroll content height it returns the height of the scroll component even though I can see the height of the content is taller. How can I get the height of the content and not just the actual scroll component/mask height?

4 Comments

Ehren Miller

A layer's size doesn't change when you add larger elements to it. Think of the layer as a bed and the objects like a really tall guy. His legs stick off the edge, but the bed hasn't gotten any larger.

Not sure what exactly you're trying to do, but you maybe you could use the maxY of the last layer?

Katherine Martinez

I am trying to create a lightbox effect within the scroll component. I want to vertically center each image when clicked. I was planning on using the scroll content height and position of scroll to vertically center. any other suggestions?

Katherine Martinez

I was able to find a contentFrame() function in the docs which returned the height value I was initially looking for. So using scroll.content.contentFrame() returned the calculated scroll.content height with all the children combined, which might come in handy for other users. But I actually didn't need this. Instead I used scroll.scrollY + (Screen.height / 2) - (imageSize/2) to calculate what the y position of the image inside of the scroll layer so it would appear vertically centered within the Device :)

Koen Bok

Katherine sound like you got it. The way the ScrollComponent decides it's height is basically that .contentFrame() function and optionally some margins. It is ran every time you add something to the contents of a ScrollComponent.

Read the entire post on Facebook