How to set up prototype scrolling

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 ways: 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.
Alert
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.