134
Views
3
Comments
Solved
add a javascript code that detect the scroll
Application Type
Reactive

hello, 

i want to add a javascript code when i scroll he assign a value to a loval variable in the block

2023-01-16 23-29-16
Lucas Araújo
Solution

I think that,

document.querySelector(".active-screen.screen-container").addEventListener('scroll', function(){                $actions.SetVariable(this.scrollY);

             console.log(this.scrollY);

})

2019-09-30 07-35-56
Aurelio Junior

Hello,

You can use a JavaScript element in the screen's (or block's) OnReady event to register a listener for the "scroll" event. Something like this:

This is the JavaScript code. "$actions.ScreenAction" is the screen action where you can assign the value to your local variable.

document.querySelector('.active-screen.screen-container').addEventListener('scroll', $actions.ScreenAction);

This will work when the screen's main container is the scrollable element. Depending on how your UI is structured, you might have to adjust the parameter passed to the "querySelector" method.

Also, be advised that this will call the client action for every "point" scrolled by the user. So if a user uses his mouse wheel to scroll all the way to the bottom, the action will be called multiple times.

2023-01-16 23-29-16
Lucas Araújo
Solution

I think that,

document.querySelector(".active-screen.screen-container").addEventListener('scroll', function(){                $actions.SetVariable(this.scrollY);

             console.log(this.scrollY);

})

2024-01-04 15-15-51
Abed Al Banna

Hi @Omar Titouhi 


What do you want to achieve exactly? If you would like to just assign a value to a local variable, as the user scrolls through a specific container/element, you won't need custom JavaScript. You can simply achieve this through the 4 following steps:

1. Identify the scrollable element (in this example, it's the Container element).

2. Click on the container, scroll down to "Events", type "onscroll" in the Event (OutSystems supports more events than the dropdown list shows, the onscroll is supported but it doesn't show up in the list).

3. Add an event handler (ContainerOnScroll, in this case).

4. Add the required logic inside the event handler (assigning a value to a local variable in your case).


I hope this helps!


Best,

Abed

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.