Jquery Window on scroll in web app not detect
Application Type
Traditional Web, Reactive

I have a problem in both of web traditional and reactive that my code not running. But first I want to use it in traditional web.
I write scroll function by using Jquery or Javascript that use HTML Scroll bar, So here my code for test

$(window).on('scroll', function () { alert("hello world");})

Put this code in OnRender and I already add Jquery in Required Scripts.
The result is "Nothing" ,no hello world alert.
Does anyone know the solutuion?

mvp_badge
MVP
Solution

Hi Chunyanuch,


In Traditional Web, you just have to use the RunJavaScript function from HTTPRequestHandler in Preparation, with the following Javascritpt: 

"window.addEventListener('scroll', function(e) {alert('Hello World!');});"


On Reactive, the scrollable element is the .screen-container element (see why here), and therefore your Javascript in OnRender should be like this:

document.getElementsByClassName("screen-container")[0].addEventListener('scroll', function(e){alert("Hello World");});

OML of Reactive in attachment (I can only upload one file but the Traditional Web instructions are also above).


Hope it helps.


Kind Regards,
João

ReactiveSandbox.oml

Hi @Chunyanuch Kimpiam

Please avoid Jquery, it is no more a good framework to use and the Javascript (vanilla) don't need ant more a framework on top.

As João sad, you can add an event listener to a window to detect a scroll event, but don't forget the DOM Ready before add any event. In Reactive you use an action associated to event onRender, but in traditional you need do this in your javascript code, something like this:


document.addEventListener("DOMContentLoaded", function() {
  // code...
});

For traditional, I prefer to add javascript code in a screen or block and avoid Server actions.


This component can be helpful to understand how we can manage scroll event
https://www.outsystems.com/forge/component-overview/9981/hi-progress-scroll



Best regards





Thank you for your suggestion! I will avoid to add it on Server actions.

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