Hi everyone!

I have been trying to create some code that allows me to know when the user is scrolling, I have managed to create some JS that is working (https://codepen.io/jt_joaotiago/pen/povdayj), and now I am trying to implement it on OS for a mobile app. I am using touch events to start the JS but so far, no sucess.

So i was hoping for some help, keep in mind you need a smartphone to test it, since touch events will only be triggered by, ummm, a touch event!


Hi J,

You could still use the window. scroll event as you did in your codepen.

I think specifically for IOS you also need the touchemove event.

document.addEventListener("touchmove", ScrollStart, false);
document.addEventListener("scroll", Scroll, false);

function ScrollStart() {
    //start of scroll event for iOS
}

function Scroll() {
    //end of scroll event for iOS
    //and
    //start/end of scroll event for other browsers
}

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi J,

You could still use the window. scroll event as you did in your codepen.

I think specifically for IOS you also need the touchemove event.

document.addEventListener("touchmove", ScrollStart, false);
document.addEventListener("scroll", Scroll, false);

function ScrollStart() {
    //start of scroll event for iOS
}

function Scroll() {
    //end of scroll event for iOS
    //and
    //start/end of scroll event for other browsers
}

Regards,

Daniel


Hi Daniel!

Regarding the iOS, that was actually one of my concerns because i knew it handled scroll events in a diff way, so that right there is good stuff!

But i still remain with the same problem in OS, i cant get the code running, i know its being called bc i added a var on the action, but the JS itself isnt doing anything and I cant debug it bc OS refuses to start a debug session on my phone.


PS: I forgot to mention that in the OML i am testing this particular code on Screen1, so if you want to check it there, thats the screen.

Can you share the code by means of an oap of the mobile app?

Daniël Kuhlmann wrote:

Can you share the code by means of an oap of the mobile app?

Sure thing, just uploaded it!


Solution

Hi J,

See attached a(nother) sample application that uses the TouchEvents widget from OutSystems to detect start/stop of scrolling and updating scroll position while scrolling.

The logic you had to set the class dynamically on container based on IsScrolling I simplified, i moved the condition from the extended property to the class property.

I could not test this on an Iphone as I don't have one.

It worked in the devicepreviewer and on my android phone via outsystems now.

Regards,

Daniel

Solution

Just tested it on iOS (OS Now), and its working great!

Using OS touch events was my first take, but my logic was all wrong and it failed, that's why I went with JS.

But you really made it very simple and clean, and no extra JS required, awesome job!

Happy I could help.