Triggers events based on page scroll



## Description


In order to test the [event/ScrollTrigger](/docs/nodes/event/ScrollTrigger) node, you can create the following setup:

Using Polygonjs [local app](/local), add the following line to the `EditorConfig.ts` file, inside the `configureEditor` function:

```
options.api.panel.viewer.setData({viewerId: 'my-viewer', html: require('./viewer.html')})
```

and create a file `viewer.html` in the same folder as `EditorConfig.ts`, containing the following:

```<div id="main-container" style="position: relative; height: 100%">
	<div id="my-viewer" style="position: absolute; width: 100%; height: 100%"></div>
	<div id="scroll-container" style="position: relative; height: 100%; overflow-y: scroll">
		<div id="checkpoint1" style="height: 400px; color: white">checkpoint 1</div>
		<div id="checkpoint2" style="height: 400px; color: red">checkpoint 2</div>
		<div id="checkpoint3" style="height: 400px; color: green">checkpoint 3</div>
		<div id="checkpoint4" style="height: 400px; color: lightred">checkpoint 4</div>
	</div>
</div>```

Then reload the editor. You will then see the viewer with a scrollbar and other divs inside.

Then create a [event/ScrollTrigger](/docs/nodes/event/ScrollTrigger) node, and set its parameters as follow:

- param `element` to `#checkpoint2`
- param `useViewport` to `false`
- param `scroller` to `#scroll-container`
- param `markers` to `true`

You should now be able to connect other event nodes to the outputs of the scrollTrigger node,
and have those be triggered as you scroll.


## Parameters

<table>
<thead>
	<tr>
		<th>Name</th>
		<th>Type</th>
		<th>Description</th>
	</tr>
</thead>
<tr>
	<td>active</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>active</td>
</tr>
<tr>
	<td>element</td>
	<td><div class='bg-purple-800 px-2 py-px text-white rounded-sm'>string</div></td>
	<td>selector of the element the scroll events are detected for</td>
</tr>
<tr>
	<td>useViewport</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>use viewport as scroller</td>
</tr>
<tr>
	<td>scroller</td>
	<td><div class='bg-purple-800 px-2 py-px text-white rounded-sm'>string</div></td>
	<td>override the scroller</td>
</tr>
<tr>
	<td>markers</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>add markers for debugging</td>
</tr>
<tr>
	<td>tprogress</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>define if progress should be updated</td>
</tr>
<tr>
	<td>progress</td>
	<td><div class='bg-yellow-800 px-2 py-px text-white rounded-sm'>float</div></td>
	<td>progress</td>
</tr>
<tr>
	<td>tinsideElement</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>define if the scroll is inside the element</td>
</tr>
<tr>
	<td>insideElement</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>1 if the scroll is inside the element</td>
</tr>
<tr>
	<td>onToggle</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>sends a trigger when we leaving or entering the element</td>
</tr>
<tr>
	<td>onEnter</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>sends a trigger when entering the element</td>
</tr>
<tr>
	<td>onLeave</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>sends a trigger when leaving the element</td>
</tr>
<tr>
	<td>onEnterBack</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>sends a trigger when entering again the element</td>
</tr>
<tr>
	<td>onLeaveBack</td>
	<td><div class='bg-emerald-800 px-2 py-px text-white rounded-sm'>boolean</div></td>
	<td>sends a trigger when leaving again the element</td>
</tr>
</table>