19
Views
5
Comments
Scroll event not working on clients environment but working on our environment.
Question

Hi Guys,

So, I'm encountering this weird behavior happening to our clients environment on the website that we created. To access the client environment, we used Amazon Workspaces. 

We attached a scroll event to window and when you scroll on the certain position, the pagination and the header of the table will be sticky/freeze something like this. (We already achieved this using JS).

 

The problem is that the scroll event is not working on their environment but working on our end. I tried to attach a sample window.addEventListener('scroll',function(){}); just to know if it's firing to other websites like google and on this website and it is working.


Any insights what went wrong?

Hi Roel,

I think this may happen if you have something else scrolling that is not the windows. For instance you can be scrolling inside the element body and this will not trigger the scroll on the window.

Check if you have any height:100% in your css/layout.

Best Regards,

Cláudio


Hi Roel,

Claudio's suggestion is very valid, it would be a good place to start. 

I have also found another forum post that might address your issue using the Touch Event widget (assuming you are using Reactive/Mobile) to detect scrolling: https://www.outsystems.com/forums/discussion/56077/implementing-js-onscroll-on-outsystems-mobile/

Also, if you are looking for 'sticky' header behaviour, you could make use of the 'position: sticky' CSS property without having to implement any JS: https://www.w3schools.com/howto/howto_css_sticky_element.asp 

Please let me know if any of these options helped :)

Regards,

Heinri

Rank: #1042

Hi Heinri and Cláudio ,

Just an update on my issue, indeed that Cláudio's sugggestion is a good way to start. So, I think what causes the problem was the overflow property of the div element with a .screen-container class.
Since we attached the scroll event on the window object,the scroll event won't be really triggered because we're scrolling on the .screen-container not on the window. So, what we do is that instead of having a overflow-y: auto on the .screen-container, we used the overflow-y: intial for our scroll event to work.