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

**URL:** <https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950>\
**Category:** Ask us anything\
**Created:** [October 17, 2023, 5:32pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950 "2023-10-17T17:32:18Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexander\_L](https://avatars.discourse-cdn.com/v4/letter/a/b5a626/32.png) [@Alexander\_L](https://community.weweb.io/u/Alexander_L)\
**Post date:** [October 17, 2023, 5:32pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/1 "2023-10-17T17:32:18Z")

</div>

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.

 ![weweb_scroll_position](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/392f582e4bb98634b28f76baf9c32672269121bc.jpeg)

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [October 18, 2023, 8:31am UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/2 "2023-10-18T08:31:30Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/223f6092b35cb7bcfc62021af923c99df77a67d0.png)

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

---

<div class="post-metadata">

**Author:** ![Alexander\_L](https://avatars.discourse-cdn.com/v4/letter/a/b5a626/32.png) [@Alexander\_L](https://community.weweb.io/u/Alexander_L)\
**Post date:** [October 18, 2023, 5:21pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/3 "2023-10-18T17:21:48Z")

</div>

> [@aurelie](#):
>
> nt to take a look at xPercent, as x is th

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?

 ![weweb_watch](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/598a410f06b4d5487d99f8155d2cd73ec97ccf0a.jpeg)

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

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [October 19, 2023, 4:13pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/4 "2023-10-19T16:13:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Alexander\_L](https://avatars.discourse-cdn.com/v4/letter/a/b5a626/32.png) [@Alexander\_L](https://community.weweb.io/u/Alexander_L)\
**Post date:** [October 20, 2023, 2:01am UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/5 "2023-10-20T02:01:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 27, 2023, 2:43pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/6 "2023-10-27T14:43:46Z")

</div>

Hi @Alexander_L 👋

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:

[![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/56c36f075099c0dfb25dc10a836469a1931a4bc6.jpeg "Infinite scrolling in WeWeb") ](https://www.youtube.com/watch?v=f7lM-yqWJqY)

---

<div class="post-metadata">

**Author:** ![Alexander\_L](https://avatars.discourse-cdn.com/v4/letter/a/b5a626/32.png) [@Alexander\_L](https://community.weweb.io/u/Alexander_L)\
**Post date:** [October 27, 2023, 11:58pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/7 "2023-10-27T23:58:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![marciano\_antonacci](https://avatars.discourse-cdn.com/v4/letter/m/eb9ed0/32.png) [@marciano\_antonacci](https://community.weweb.io/u/marciano_antonacci)\
**Post date:** [February 29, 2024, 2:47pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/8 "2024-02-29T14:47:24Z")

</div>

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

 ![Scherm­afbeelding 2024-02-29 om 14.17.56](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/cd40eef04ad065f131592f2be60cba088ad3cc1c.png)

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [February 29, 2024, 3:30pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/9 "2024-02-29T15:30:40Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![marciano\_antonacci](https://avatars.discourse-cdn.com/v4/letter/m/eb9ed0/32.png) [@marciano\_antonacci](https://community.weweb.io/u/marciano_antonacci)\
**Post date:** [February 29, 2024, 3:46pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/10 "2024-02-29T15:46:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Micah](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/micah/32/9102_2.png) [@Micah](https://community.weweb.io/u/Micah)\
**Post date:** [March 4, 2024, 8:02pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/11 "2024-03-04T20:02:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [March 14, 2024, 5:58pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/12 "2024-03-14T17:58:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Micah](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/micah/32/9102_2.png) [@Micah](https://community.weweb.io/u/Micah)\
**Post date:** [March 14, 2024, 7:04pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/13 "2024-03-14T19:04:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [March 20, 2024, 10:08am UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/14 "2024-03-20T10:08:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chaefner](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/chaefner/32/9652_2.png) [@chaefner](https://community.weweb.io/u/chaefner)\
**Post date:** [July 23, 2024, 9:33am UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/15 "2024-07-23T09:33:12Z")

</div>

@Joyce thanks for the video. I followed your instruction and created a slider, where I activated “Watch Scroll Position” on each Flexbox in the slider. However, it seems like the scrolling values will get lost after opening the preview mode. Is that on purpose or a bug?

My goal is to check the horizontal position of each element to display / hide an additional label.

1. I activated the scroll watching and named the ID of each element uniquely (slide1, slide2, etc.)
2. I could grab this information via formula
3. When I go to preview-mode, the position values will disappear (= remain undefined). In order to get the values again, I have to deactivate/reactivate the watch on scroll feature or changed the IDs name.

However, this scenario repeats all the time, so not possible to work with these values.

What could try else?

Examples: After activating

 ![Bildschirmfoto 2024-07-23 um 11.19.03](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8fc3fc09eb3a697559fb9e765a121bea8f21dd2f.png)

After going to preview mode:

 ![Bildschirmfoto 2024-07-23 um 11.19.34](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/a367461a4033f3b64718434047f1060d31042274.png)

---

<div class="post-metadata">

**Author:** ![jptrinh](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jptrinh/32/1493_2.png) [@jptrinh](https://community.weweb.io/u/jptrinh)\
**Post date:** [July 26, 2024, 3:18pm UTC](https://community.weweb.io/t/how-to-use-track-scroll-position-in-advanced-interactions/4950/16 "2024-07-26T15:18:08Z")

</div>

Hey @chaefner  
That may be an issue with the Slider instance. Can you fill a ticket [here](https://support.weweb.io/) so the team can have a look?
