How make an interface "scrollable"

[Jee]

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):

Somebody know how to do that ?

here is the prototype link Penpot - Design Freedom for Teams

Thank’s for your help

[juan.delacruz]

Hi @Jee Thank you for your report

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.

[Leiloista]

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!

[christianlupus]

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?

[Knud]

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)

[Cristine_Mae_Pacilan]

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.

[Denis]

I accidentally got a scroll prototype to work. The solution for this is, the content needs to be bigger than the available view of you browser window as you can see on the image.

If the browser window is to big, you can see the content.

If the browser window height fits the prototype, its working, but the board (1) is moving up/away and shows the dark browser window content.

This means: you could use the mobile test viewers from the browsers.
But, the page does not change to responsive mode or something.

Penpot needs a working solution for basic scrolling content. Its a basic and very common interaction.

Or, show how to realize it.

[Denis]

I just realized that figma would have the same issue, if they wouldn’t use the limiting canvas with the device “simulation” in the run/testing view.

I didn’t find any of these neither in penpot 1.x nor in penpot 2.
But maybe there is a good way to create such canvases by one self (?)