# How make an interface "scrollable" **URL:** \ **Category:** Ask the community\ **Created:** [September 15, 2022, 2:48pm UTC](https://community.penpot.app/t/how-make-an-interface-scrollable/691 "2022-09-15T14:48:56Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Jee](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/jee/32/3795_2.png) [@Jee](https://community.penpot.app/u/Jee)\ **Post date:** [September 15, 2022, 2:48pm UTC](https://community.penpot.app/t/how-make-an-interface-scrollable/691/1 "2022-09-15T14:48:56Z")
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](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](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/1X/e6bd891af699e8bb4d6a726419361d96608776ae.gif) Somebody know how to do that ? here is the prototype link [Penpot - Design Freedom for Teams](https://design.penpot.app/#/view/ff8b4f40-3502-11ed-9e6a-c67f7655c7b3?page-id=ff8b4f41-3502-11ed-9e6a-c67f7655c7b3§ion=interactions&index=0&share-id=d02b3520-3503-11ed-9e6a-c67f7655c7b3) Thank’s for your help ---
**Author:** ![juan.delacruz](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/juan.delacruz/32/12_2.png) [@juan.delacruz](https://community.penpot.app/u/juan.delacruz)\ **Post date:** [September 19, 2022, 10:12am UTC](https://community.penpot.app/t/how-make-an-interface-scrollable/691/2 "2022-09-19T10:12:18Z")
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. ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/4/4d5832c4bff7ea5e5fab6f57b89ca0c35e971260.png) ---
**Author:** ![Leiloista](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/leiloista/32/2718_2.png) [@Leiloista](https://community.penpot.app/u/Leiloista)\ **Post date:** [March 16, 2023, 11:51pm UTC](https://community.penpot.app/t/how-make-an-interface-scrollable/691/3 "2023-03-16T23:51:34Z")
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! ---
**Author:** ![christianlupus](https://avatars.discourse-cdn.com/v4/letter/c/50afbb/32.png) [@christianlupus](https://community.penpot.app/u/christianlupus)\ **Post date:** [March 20, 2023, 2:00pm UTC](https://community.penpot.app/t/how-make-an-interface-scrollable/691/4 "2023-03-20T14:00:08Z")
I tried the [prototype link](https://design.penpot.app/#/view/ff8b4f40-3502-11ed-9e6a-c67f7655c7b3?page-id=ff8b4f41-3502-11ed-9e6a-c67f7655c7b3§ion=interactions&index=0&share-id=d02b3520-3503-11ed-9e6a-c67f7655c7b3) and it seems some way broken: ![grafik](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/7ef12398f484c8b891e7a9bfd87ed87fe37a7e18.png) 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? ---
**Author:** ![Knud](https://avatars.discourse-cdn.com/v4/letter/k/82dd89/32.png) [@Knud](https://community.penpot.app/u/Knud)\ **Post date:** [July 31, 2023, 12:21pm UTC](https://community.penpot.app/t/how-make-an-interface-scrollable/691/5 "2023-07-31T12:21:13Z")
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) ---
**Author:** ![Cristine\_Mae\_Pacilan](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/cristine_mae_pacilan/32/4531_2.png) [@Cristine\_Mae\_Pacilan](https://community.penpot.app/u/Cristine_Mae_Pacilan)\ **Post date:** [March 25, 2024, 2:52am UTC](https://community.penpot.app/t/how-make-an-interface-scrollable/691/6 "2024-03-25T02:52:20Z")
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. ---
**Author:** ![Denis](https://avatars.discourse-cdn.com/v4/letter/d/5e9695/32.png) [@Denis](https://community.penpot.app/u/Denis)\ **Post date:** [April 11, 2024, 10:27am UTC](https://community.penpot.app/t/how-make-an-interface-scrollable/691/7 "2024-04-11T10:27:46Z")
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. ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/2/2cf83109e665aef7df79526b7be33a5a89fdcfe2.png) If the browser window is to big, you can see the content. ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/4/4e0c3e5cdd0bb0e15dba5f6209e30730fd83db01.png) 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. ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/e/e5ae1e54edb6df0f2be3e661205c1e06311bf866.png) This means: you could use the mobile test viewers from the browsers. But, the page does not change to responsive mode or something. ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/7/7eb2489671fe025800de61a355356086daf38965.png) Penpot needs a working solution for basic scrolling content. Its a basic and very common interaction. Or, show how to realize it. ---
**Author:** ![Denis](https://avatars.discourse-cdn.com/v4/letter/d/5e9695/32.png) [@Denis](https://community.penpot.app/u/Denis)\ **Post date:** [June 18, 2024, 7:17am UTC](https://community.penpot.app/t/how-make-an-interface-scrollable/691/8 "2024-06-18T07:17:31Z")
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 (?) ---
**Author:** ![Mario](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/mario/32/4080_2.png) [@Mario](https://community.penpot.app/u/Mario)\ **Post date:** [January 20, 2025, 4:28pm UTC](https://community.penpot.app/t/how-make-an-interface-scrollable/691/9 "2025-01-20T16:28:53Z")
Recently, Laura talked about this in her Prototyping session. So if anyone is looking for a recent video with simple instruction on how to get a scrolling effect for your prototypes - [check this video out…](https://www.youtube.com/live/Dz1RL3tPAyI?feature=shared&t=1861)