How make an interface "scrollable"

Hi penpot’s community,

i’ve a fixed Navbar on the top and a fixed Footer on the bottom and in the middle a long ‘Lorem Ipsum’ text like this : https://i.imgur.com/ab3LjDy.png (sorry as a new user i can only add one media per post)

But i can’t figured out how to reproduce the scroll effect in the view mode that is show in the prototyping docs >> help.penpot.app/user-guide/prototyping/#prototyping-fix-scroll this one (sorry for the broken link as a new user i can only add two links per post):
prototyping-scroll

Somebody know how to do that ?

here is the prototype link Penpot - Design Freedom for Teams

Thank’s for your help

2 Likes

Hi @Jee Thank you for your report :slight_smile:

You probably need to give more height to the layer that contains the text you want to scroll.

In case of being a Board, make sure you choose the measurements of the device for which you want to make the prototype and check the “Clip content” option.

image

Hi. I need help finding the option to fix elements. I’m currently using Flexbox elements and the top element (header) and the bottom one (footer) I’d like to have it sticky to the page, just like in this thread example.
I’ve spend more than 3 hours looking for this. Position only has X, Y parameters. No “absolute/scroll” parameters.

PenPot is amazing by the way!

1 Like

I tried the prototype link and it seems some way broken:

Has the penpot changed in the meantime?


Nevertheless, I was not able to reproduce the suggested solution by @juan.delacruz. Could someone provide a complete example that is working? Or is the problem simply a bug in the current implementation?

My understanding is that I need a (root) frame that must be configured to be shown and that clips its content. The content needs to be added to the frame. Is this sufficient or is there anything more to be done?

It seems rather un-intuitive to do some scrollable designs. Maybe there is a video that shows how to do this in an efficient way to build up such a prototype?

For me, this is still an issue and I don’t know how to build a simple layout with scrolling behavior. No something special like a sidebar, not even fixing some elements, just a simple scrolling. I did research for some hours now and could not find any solution.

Can someone help?

(I’m not a professional designer and more a developer then a designer, so maybe I’m thinking fundamentally wrong)

Your video doesn’t help you have to give us a detailed tutorial for us to enlighten, How do we apply this? if it just a video? Come on where not witchcraft to guess how did you make it? Penpot is slightly still not useful enough there are some lacking features that Figma can while Penpot doesn’t have.