hello,
i want to add a javascript code when i scroll he assign a value to a loval variable in the block
I think that,
document.querySelector(".active-screen.screen-container").addEventListener('scroll', function(){ $actions.SetVariable(this.scrollY);
console.log(this.scrollY);
})
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.
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