How to detect a window scroll event in a Reactive application
Question

Hi,

in an Reactive application, how can I detect a window scroll and then call an action based on that ?

Renaud

mvp_badge
MVP

Hi Renaud,

You can do that with JavaScript widget you can add to your OnReady event handler in a screen:

Use the .scroll() event on window, like this:

For example call an action AtBottomAction() when reaching the bottom.

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $actions.AtBottomAction()
   }
});

Or  an NearBottomAction() when almost reaching the bottom

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $actions.NearBottomAction()
});

Then action names are just examples, replace them with your own.

If you don't want to use jquery use:

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;
// your code
  }
});


Regards,

Daniel

Daniel,

I just test this for a Reactive application and it didn't work.

The event doesn't seem to be triggered.

Renaud

mvp_badge
MVP

The .scroll  event is a standard Browser DOM model event that will be triggered, has nothing to do with reactive or traditional web application types. 

Try to add this snippet and check the browser console, just to double check the event IS fired.

window.addEventListener('scroll', function() {
  console.log('Scroll event');
});

Daniël Kuhlmann wrote:

The .scroll  event is a standard Browser DOM model event that will be triggered, has nothing to do with reactive or traditional web application types. 

Try to add this snippet and check the browser console, just to double check the event IS fired.

window.addEventListener('scroll', function() {
  console.log('Scroll event');
});

 Daniël,

I've made many different tests and I can confirm than the following code didn't work as expected:

window.addEventListener('scroll', function() {
  console.log('Scroll event');
});

 ... I've implemented a workaround by changing the "scroll" listener with an "mouvemove" like this:

window.addEventListener('mousemove', function() {
  console.log('Scroll event');
});

and it works but i really dislike to be obliged to use such trick ... if you can explain me what to do to have the window scroll working I'll be glad!

Thanks a lot.

Daniel,

indeed, but for a weird reason it doesn't log anything ... and I really don't understand why!

In order to go through this simple issue I'm using a ultra simple case ...  nothing else than a big div of 600px height and an OnReady screen action with the code you provide.

I can provide you the project ... even if I don't think it's usefull in this case.

What I've seen in the console:

DevTools failed to load SourceMap: Could not load content for https://bmedicalsystems-dev.outsystemsenterprise.com/Leader/scripts/Debugger.js.map;: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE


require.js:11 [Violation] 'setTimeout' handler took 91ms


Renaud

mvp_badge
MVP

Hi Renaud,

Have a look at the following discussion:

https://www.outsystems.com/forums/discussion/64874/changes-to-outsystems-ui-css/?utm_source=community&utm_medium=email&utm_campaign=forum-reply=#Post255833

Abstract:

"In a recent update, we changed the scrollable element of the layout to be the ".screen-container" DIV instead of the HTML in order to fix an issue that prevented the screen to go back to the last scroll position, when performing a back navigation action, e.g.: go back to a list screen and remember the scroll position.

Our intention is to have the scrollable element being the HTML in the future, which has multiple advantages, but currently the back navigation was an important issue to be fixed.

You can still use scroll events on the scrollable element if needed.

Let me know if this helps :)"

So try to implement the scroll events on the .screen-container class. 

Regards,

Daniel

Hi everyone, during my research I found this post in the community which explains how to do what you want. So I guess this topic may be solved right now.


best regards,


Getting window on scroll using JS

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