Breadcrumbs

How to create a scroll area

Scrollable areas allow you to display large amounts of content in a small pane contained within a page.
The Scroll component is present in all Design Systems but is excluded from the interaction component list in the Activator interface by default.

image-20240927-073827.png


It can be made available to end users by removing it from the list of excluded components in the fusion configuration.

The Design System must be compiled after you make this change.

See Fusion Library | How do I export the Design System to Activator? for further information.

229cf410-baa6-4081-be49-19b712f42db7.png
You can find the excluded list in the fusion.json


The following example shows how to use the component Scroll in a Popup.

1: Add a popup to your slide:


image-20240927-071554.png


image-20240927-071650.png

2: Select the Custom Overlay and adjust the size as desired:

image-20240927-071809.png

3: Add the component Scroll to the Custom Overlay:


image-20240927-072041.png


4: Adjust the scroll components size as needed.

  • Height defines how much you see before needing to scroll.

  • Scrollable content defines how far you can scroll.

image-20240927-072358.png

5: Insert a text component and paste your long text into it. Adjust paddings as needed:


image-20240927-072819.png