# Scrolling Area

> Learn about the Scrolling Area component in PandaSuite, including how to add scrollable content, create markers, and synchronize with other components for advanced scrolling effects.

https://docs.pandasuite.com/essentials/components/scrolling-area/

**The Scrolling Area component allows you to add a scrollable element: it can be an object (a paragraph, a scroll bar, a slider, an image) or even a page. In concrete terms, it is content that is not visible on the screen and for which you have to slide your finger or mouse vertically or horizontally to display it.**

[Video: Scrolling Area Component Introduction](https://www.youtube.com/embed/OB5WNU73KOE?&hl=en&cc_lang_pref=en&cc_load_policy=1)

## Insert a Scrolling Area

Use a **Scrolling Area** to create a dedicated scrollable viewport. If you want your entire screen to scroll with this component, make the Scrolling Area full screen.

> **Tip**
>
> If the scroll should follow a layout that adapts to the size of its children,
> such as text that grows and pushes the following elements, enable
> **Scrolling** on a [Flexbox](https://docs.pandasuite.com/essentials/components/flexbox/). Use a
> **Scrolling Area** when the scrollable content is a self-contained region
> with a visible area sized separately from the surrounding layout.

> **Info**
>
> If you want to create a scrolling list from dynamic content, insert a
> [Collection List](https://docs.pandasuite.com/essentials/data/collection/) component.

To add a scroll area, click on **Components** and insert the **Scrolling Area**.

Adjust the size of the visible area and double click on it to edit its content. Insert the objects you want to scroll: a text block, an image etc...

Go to the **Properties** to choose the type of scrolling: **Horizontal** or **Vertical** or both.

### Size of the area

Depending on the type of scrolling (Horizontal or Vertical), choose the size of your scrolling.

By clicking on the **Adjust** button, you define the size of the area according to the objects inside.

### Other properties

**User scrolling**: This option allows the user to scroll the scroll area with their finger or mouse.

**Scroll bar**: you can choose whether or not to display a scroll bar.

**Bounce**: You can enable or disable a bounce effect at the end of the scroll.

**Fast deceleration**: you can add a fast slowdown effect.

## Create markers

Markers allow you to mark a position on your scrolling area and associate an action to it:

- Display this position by default
- Trigger an action from this position
- Change the position

To create a marker, enter the **Scrolling Area** component. You can create a marker visually by placing the zone at the right level and clicking on the **+** button or by clicking on the **+** button and manually editing the position.

Once you have created your markers, hover over each marker to bring up the settings, options and the Pin icon which allows you to set a default marker.

**Magnetism** allows you to impose a scroll stop at each marker.

When magnetism is on, a **Zone** option appears, checked by default. If the content between the previous marker with magnetism (or the start) and this one is longer than the scrolling area, it adds a stop where the end of that content reaches the bottom of the area (the right edge when scrolling horizontally), so it can be read in full before the scroll moves on to the marker. Uncheck it to stop only at the marker itself.

## Add an action

### Trigger an action from the Scrolling Area

Go to the Actions window and click on **+ Add**.

Choose your trigger from the list:

- **Positions \[markers]**
- **Tap / Click**
- **Double tap / click**
- **Touch down**
- **Touch up**
- **Swipe up/down/right/left**
- **Mouse over/out**
- **Start scrolling**
- **End scrolling**

### Change position

To act on the scroll zone, you must have created markers.

Select a trigger and the **Interact with a component** > **Scrolling Area**.

You can choose from several actions:

- **Change position**
- **Next position**
- **Previous position**

### Synchronize a Scrolling Area

[Synchronization](https://docs.pandasuite.com/essentials/components/synchronization/) allows you to synchronize your **Scrolling Area** component with another component. [To create a Parallax effect](https://docs.pandasuite.com/tutorials/how-to/parallax-animations-with-accelerometer/), you just have to create at least scrolling zones of different sizes and synchronize them.

Here are the parameters to synchronize a scroll zone:

- **Positions in x**
- **Positions in y**
- **Markers**

These parameters are accessible from the **Properties** window of the Synchronization component.

[Video: Scrolling Area tutorial](https://www.youtube.com/embed/khrQibUlEcE)