Skip to content
English
Submit a request
  • There are no suggestions because the search field is empty.

How to Use Nested Scroll Tiles in Builder 2.0

This guide explains how to create layered scrolling layouts by placing a scroll tile inside another scroll tile — enabling each container to scroll independently along its own axis.

Overview

A Nested Scroll Tile is a scroll container placed inside another scroll container. The inner and outer containers scroll independently within their own boundaries, allowing you to build richer interactive layouts where different parts of the microapp move separately.

Note: Nested Scroll Tiles are available in Builder 2.0 only.

How It Works

Each scroll container — inner and outer — scrolls independently. They can be configured with different scroll directions, so, for example, the outer container can scroll vertically while the inner container scrolls horizontally. The viewer controls each axis separately as they interact with the microapp.

How to Create a Nested Scroll Layout

  1. Add a Scroll Tile to your canvas in Builder 2.0 — this becomes your outer scroll container.
  2. Inside the outer Scroll Tile, add another Scroll Tile — this becomes your inner scroll container.
  3. Set the scroll direction for each container independently in the Properties panel.
  4. Add content tiles inside each scroll container as needed.
  5. Preview your microapp to confirm each container scrolls as intended.

Tip: Test your nested layout at different viewport sizes in Preview to make sure both scroll axes behave as expected across device types.

Design Patterns

Nested Scroll Tiles enable layouts that aren't possible with a single scroll container:

Pattern How to set it up
Horizontal product carousel inside a vertical page Outer scroll: vertical. Inner scroll: horizontal. Place product tiles inside the inner container.
Fixed sidebar with scrollable content panel Outer scroll: vertical for main content. Inner scroll: vertical, constrained to the content panel area.
Multi-panel dashboard Multiple inner scroll containers side by side, each scrolling independently within its section.

Common Questions

Can inner and outer scroll containers have different scroll directions?
Yes — each container's scroll direction is set independently. A common pattern is an outer vertical scroll with an inner horizontal scroll for a carousel effect.

Is Nested Scroll Tile available in Builder 1.0?
No — Nested Scroll Tiles are a Builder 2.0 feature only.

My nested scroll layout isn't detecting the correct scroll direction automatically — what should I check?
Make sure horizontal automatic direction detection is enabled for the relevant scroll container. If the inner container is set to auto-detect direction and is defaulting to vertical, check the scroll direction setting in the Properties panel and set it explicitly if needed.

Can I nest more than two levels of scroll containers?
Test your specific layout in Preview — deeply nested scroll configurations may behave differently depending on layout complexity. Start with two levels and validate before adding more.