Scroll actions let you define certain scroll based logic and behaviour. Trigger actions based on scroll position, drive transitions as you scroll within a set range, or control the scroll position itself within a scroll container.
When scrolled to a position
You can set an action to be triggered when the user has scrolled the content of a scroll container to or past a particular position. You define the distance of the trigger scroll position from the top left of the container, and the direction of the scroll.
For example, setting an action on a scroll container to trigger a header component to change when the user has scrolled down 100px:
- When scrolled to a position > position: 100px > direction: Down > Set ‘search overlay’ to ‘Show’
… and an additional action on the scroll container to trigger the component to change again as the user scrolls back up past the 100px mark:
- When scrolled to a position > position: 100px > direction: Up > Set ‘search overlay’ to ‘Hide’
When scrolling within a range
You can define a particular scroll range within a scroll container, that will drive a transition. Define the ‘From’ and ‘To’ scroll position and then scrolling within that range will directly control the set transition, much like a swipe action. Scrolling to the end of the range completes the transition and action, while scrolling back before reaching the end effectively rewinds the transition.
Controlling scrolling through script expressions
Setting scroll position
You can create an action to jump the content of a scroll container to a particular scroll position using script expressions like this:
scrollTo([pageName, elementName], positionX, positionY);
scrollTo(["Page 1", "Container"], 0, 100);
This expression will jump the scrollable content of the self-titled Container (on Page 1) to a position 100px down from the top. The position is relative to the top left corner of the scroll container, and not relative to position the user may have already scrolled to. If the user had already scrolled down beyond 100px and triggered this action, the position would jump up to the 100px mark.
You can also add a duration to cause the scroll container content to transition/auto-scroll to a position.
scrollTo([pageName, elementName], positionX, positionY, duration);
scrollTo(["Page 1", "Container"], 0, 100, 300);
Here the addition of the 300 denotes the 300ms the content will take to transition from its current position to a position 100px down from the top.
Native browser scrolling in Chrome and Firefox
For smooth scrolling when previewing in Chrome and Firefox, you can use native browser scrolling via a script. (the script will work with other browsers, but they will jump straight to the content - see more here).
For example, rather than having to count the pixels to the layer “My Rectangle”:
scrollTo(['Page 1', 'My Rectangle'], 0, 1955, 200);
You can just use the script:
scrollTo(['Page 1', 'My Rectangle']);
Getting scroll position
You can find out the current position of a scroll container to discover if a scroll container has been scrolled and how far.
scrollPos(["Page 1", "Container"]);
This will get the current scroll position (in pixels) of the scroll container called “Container” on Page 1. Note: if the element is not found, 'false' is returned.
Reset scroll position
You can also reset the scroll position of a scroll container to the top left at any time.