User guides

Scroll Overflow

You can set the scroll overflow effect for a prototype frame.

Pixso now supports 3 kinds of scroll overflow effect, vertical scrolling, horizontal scrolling, and horizontal & vertical scrolling.

Scroll Overflow in Pixso

1. Vertical Scrolling

Vertical scrolling allows you to slide or scroll up and down within the frame so as to imitate the effect of browsing a long webpage(shopping app, news app).

2. Horizontal Scrolling

Horizontal scrolling allows you to slide or scroll left and right within the frame while keeping the vertical position at the same time. It is usually used to create carousels.

3. Horizontal & Vertical Scrolling

Horizontal & vertical scrolling allows you to scroll in any direction within the frame, up, down, left, or right. It is usually used in previewing maps.

Tip: To use the scroll overflow effect on a frame, the content that needs to overflow must exceed the borders of the frame.

Set up a scrollable viewport

  1. Create an outer frame for the visible area of the prototype. Its dimensions define the viewport.
  2. Place the longer or wider content inside that frame. The content must extend beyond the outer frame in the direction you want to scroll.
  3. Select the outer frame and open the Prototype panel.
  4. Set overflow to vertical, horizontal, or horizontal and vertical scrolling.
  5. Play the prototype and check that the overflow content can be reached.

For a vertical page, use a content area taller than the viewport. For a horizontal strip, make the content wider. For a map-like area, content must extend beyond the viewport in both directions.

Vertical scrolling supports the mouse wheel or dragging in the presentation. Use dragging to test horizontal scrolling or scrolling in both directions.

If the frame does not scroll

  • Check that the content is nested inside the viewport frame, rather than placed beside it.
  • Check that it extends beyond the viewport in the selected direction.
  • Apply the overflow setting to the viewport frame containing the content.
  • Test in prototype playback, not only on the design canvas.