How to set up prototype scrolling

Set up prototype scrolling to make screens or containers behave more like real app or website experiences during preview and presentation.

Before you start

1. Switch your board to Prototype mode before setting up scrolling.
   
2. Make sure the content inside your screen or container extends beyond its visible area. Scrolling only works when the content overflows in the selected scroll direction.

How to set up scrolling

1. Open the board that contains your prototype. Switch to Prototype mode.
2. Select the screen or container where you want to apply scroll behavior.
   
3. In the Prototype panel, go to Scroll behaviors.
   
   
   
4. In Content scrolling, choose the scroll direction:
   
1. Vertical: Use for pages, feeds, forms, dashboards, or long mobile screens.
2. Horizontal: Use for carousels, galleries, tabs, or side-scrolling content.
3. Both: Use when you need to scroll in more than one direction.
   
   
   
5. If you want certain elements to stay visible while users scroll, select the element and turn on Fix position when scrolling in the Prototype panel. Make sure the fixed element is placed inside the scrollable screen or container.
   
   
   
6. Use Quick preview or Presentation mode to test the scrolling behavior.
   

To make a screen scroll properly, make sure at least one container inside the screen has Fix position when scrolling applied.

Note

1. Fix position when scrolling is useful for elements such as headers, navigation menus, sticky buttons, and floating action buttons.
2. To fix an element’s position, select the container that contains the element before turning on Fix position when scrolling.
3. You can check which elements have Scroll or Fix position applied from the Layers panel. This helps you quickly review and manage scrolling behavior in your prototype.
   
   

Need more help?

If this does not solve your issue, contact support and include a screenshot if possible.

• Related Articles

• How to access Prototype mode

  Visily’s Prototype mode lets you create interactive app flows by connecting screens or elements. You can simulate real user journeys, making your designs feel like a real app, even before development starts. Before you start Make sure your board ...

• How to present your prototype

  Presentation mode lets you experience your design in full screen, just like a real app. It’s perfect for walking through complete flows, sharing with teammates, or showcasing your ideas. Before you start Switch your board to Prototype mode. Make sure ...

• How to create a prototype with AI

  Use Create prototype with AI to quickly build an interactive flow from selected screens. Visily automatically connects the screens with interaction links, helping you visualize the user journey faster. Before you start Make sure your board has at ...

• How to set up interaction actions

  In Visily, actions help you turn prototype interactions into real user flows, such as navigating between screens, going back, opening overlays, or closing overlays. Before you start To set up or edit interaction actions, switch your board to ...

• How to use Flows to organize your prototype

  A flow in Visily prototype mode is a set of connected screens that represents a specific user journey in your prototype. Use flows to organize prototype paths in your board, such as onboarding, sign-up, checkout, or other user journeys. Before you ...