# Scroll Direction

The Scroll Direction property allows you to set scrolling interactions, for the moment only on scroll direction (scroll event).

{% hint style="warning" %}
Remember to toggle on the Scroll Direction property to enable this function
{% endhint %}

![](https://lh3.googleusercontent.com/Ze8h8aCzV0OF1DjKxWNE3xcb3cODQXZI0pkwmSdzhOMl2vK0s8UfOWoTCPjNhiszquN22Smq6uTROloyJK_CKRVn3d0lZYUudrkJb-c0BLE5Dh0iDBghhkblYTbPvL8toaHnFdmn0FvDdbkBYPs5Lek)

* Select a block.
* Navigate to the Advanced tab.
* Open Scrolling tab.
* Open the Scroll Direction tab to show settings.

![](https://lh5.googleusercontent.com/D-sj9KAI_jNmQ2_V3SwYFGN-SNxzo7xPBGh0XifRmHpee75TFWoCdJXhPfuF71KYWsCrvtcWliP30zmPWXI-dyl1YjOEsAsCRlvUgonGaiYkaMxIoliRDDcycyiIBwl9KX_mGsKYbLOxkOaEX5yKfPQ)

## Offset

The Scroll Direction Offset property allows you to control the amount the top of the sliver has been scrolled past the top of the viewport(top, bottom or both).

* Open the Scroll Direction tab.
* Set Top And/or Bottom offset.

![](https://lh6.googleusercontent.com/JVEyyRl-8QeLia6CiY-7jLei7MT58chFlf2WmKyB00xNsKp-TIByKykFKAgFFmxgiozXFv9PHcywrauvGoaBNdmp-WTrm4Wu-4RyXWKjcb1qyddL44YFZclKHsClVAXTg6MB7o3_p_nw-bRYJb5HpB4)

## Tolerance

The Tolerance property allows you to set a distance (in pixels), at which an action is triggered (Up, Down or both).

* Open Scroll Direction tab.
* Set Up/Down tolerancce.

![](https://lh4.googleusercontent.com/Idq6NP6g7qGpRG1Ap6qiPv-HaWeb5TuT-RII2S7kEVRiSAiXz-S5WPJEu1haAkuMAMNj2bYZcUQmwXTNbxB0C8TNpPmCQEsCtamCAWpsvBkYhoNJPoWbDVn87G74nsq6dykpX5QYDfKqPP7cIHlmC20)

## Action

The Action property allows you to set the type of Action you require on scroll, such as scroll down -slide up, scroll down - reset position, scroll up - slide up, scroll up - reset position.

* Open Scroll Direction tab.
* Set required Scroll Direction Action in the dropdown.

![](https://lh4.googleusercontent.com/tgKZQt3vgrnun1v06rYDhBV9S-OURFSp0cOnpBA5kli_7Pm2eFvOftRYIAEVXPG1qfhLGVhlvLOWEJcneXuQD5gSkRdrcEo9eNVA-SPdPDpRGSDftF-v5knnRV6pPX5TIRe-79YzddvL9we127Dn7UQ)

## Transition Duration

The Transition Duration property allows you to set a duration for your Action effect.

![](https://lh4.googleusercontent.com/FUIeS4Rdeoj_0s2qI3MJ1B3n6WkY_ElHS8zA2RZpRh0lHhP1n_kUMi5bz9lNDm2Xq_AgwLiDG0m4YQk_hrSa6OWyyLKDQp8snoCFm7Nj72Mk6S2Pmg4rXZEE-1a4LPrCSlq3sj_sBGoWC6sy5MWXJ5s)

## Selectors

Selectors shows you the list of classes that are applied automatically to the block for which you have activated the Scroll Direction property.

* Select a block.
* Open the Advanced Block.
* Open Scroll tab.
* Open Scroll Direction tab.
* Click  Selectors. 

![](https://lh3.googleusercontent.com/XR7ciBRsGLHEKqQfduvH621k3sJ4dG9vpztHYDkCpP-pmpsRcWr5j9TZuN7pOLHWU3wtP27r49nB9mBoMCdx8auGFD8SZ6157HCOOApMv5GNlV-uP6qvDNqtTJO3dqH9jfu7jlhbCEhYq4IyrN2cNcg)

* The Scroll Direction Selectors modal shows all the classes applied to the block.

<figure><img src="https://lh3.googleusercontent.com/Gxfrn9qTSwajV9DxBkO7F0N8nOQ-skQijA453oTbweyCbsP_VMd5S8sZc6zHufxZqKx0wh8PQTyZktnQvusMqymJLkwNl5QorQJNg0LOZlrHlcII8bsDp5qVO68oYOZfJ9chiXPEweqdV-lQgRqvJaA" alt=""><figcaption></figcaption></figure>