How to use "Track Scroll Position" in Advanced Interactions"

Hello. I’d like to know how to use the “Track Scroll Position” within “Advanced Interactions”? Where is this event displayed so I can use it in a workflow, or to bind it somehow?

I’m setting up a horizontal section with lot of items. As the user scrolls to the right I’d like to be able to trigger some JS (or a workflow) when the scroll position has reached a certain point.

When your element has an id and the “Watch scroll position” is on, you will see an object with all your element properties on the explorer. These values are reactive, so you can use them inside binding

In your case, you probably want to take a look at xPercent, as x is the horizontal axis

1 Like

Hey @aurelie - thanks for sending this info.

Unfortunately, after giving my element an id (I tried multiple kinds of elements), and selecting “Watch scroll position”, the “Components Positions” does not show in the explorer?

Is there another step to get it to show? I tried reloading the page as an obvious step, but alas no luck.

Hey !
The feature was behind a beta tag, but we just opened it :). You should see the object now

Great stuff - I can see it now. Thanks for opening that up.

Hi @Alexander_L :wave:

Were you able to achieve what you set out to do?

If not, here’s a video tutorial we just released that uses workflows on page scroll:

1 Like

Hi @Joyce . Yes! I was able to implement it via pagination in the backend, but I look forward to watching how you did it in case there are some improvements I could make.

1 Like

Hi @Joyce @aurelie,
I’m trying this feature but it doesn’t seem to work here. The object remains empty for some elements. These are repeated components but they do have an unique ID. Do you know why this doesn’t work? thanks

It should work on repeat element as soon as they have a unique id each.
On which component are you applying this? Are they on the page?

Yes, they are on the page and it’s the Flexbox component.
The data (list) for the repeat is fetched in the on load workflow.

I’m also having an issue with getting any data out of the watch scroll position. I have made sure all elements have a unique ID

We has a bug when a section and an element share the same id. The fix has been published, did it resolve the problem or do you still have issue with this?

I actually was able to fix it a week ago. The issue was when i used a symbol in the ID. If there were symbols or punctuation, it didn’t work, but it worked with out it.

1 Like

Thanks so much for taking the time to share the solution @Micah, really appreciate it :slight_smile:

1 Like