Skip to main content
Skip table of contents

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

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close