Scroll-based JavaScript animation changed on mobile devices

Question

I have 2 divs (left and right) and I want to scroll left right. https://jsfiddle.net/3jdsazhg/2/

This works fine on the desktop, but when I switch to mobile, it no longer smoothes ... This can be noticed very easily by changing

_left.style.top = _content.scrollTop - (_content.scrollTop * ratioLeftRight) + 'px'; 

to

 _left.style.top = _content.scrollTop + 'px'; 

Where should it act as a fixed positioned div

• I would like to know the exact reason why this is behind the scenes ... I know this is not an animation. Simple animation on a div is smooth, a problem arises when it is based on scrolling.
• How can I make this animation smooth?

Answer 1

I finally managed to find a solution.

From my point of view, I suppose that the mobile look skips the scroll event less often, and since we scroll the shell, first scroll the whole page, and then scroll back from the left side of js and because it is different from the desktop version, this problem becomes visible ...

The solution was to change the left side to a fixed position and align it from above, rather than add to it.

 _left.style.top = -(_content.scrollTop * ratioLeftRight) + 'px'; 

Answer 2

This is probably intermittent because it scrolls ALOT while scrolling, in fact I am sure that IOS mobile pauses javascript execution while the user scrolls.

Instead, I suggest using an interval, you can adjust the time between each interval to what works well for your use case.

Although it may seem intense that it fires this logic every X milliseconds when using the scroll event, you can fire the event hundreds of times per second, which will be much more intense and noticeable for the user using the device with the maximum processing power.

 (function () { var interval = null, //Currently set at 0.4 seconds, play with the code //and change this value to see what works best for //this use-case time_between_interval = 400; setInterval(scrollLogic, time_between_interval); function scrollLogic () { //The function body of what you're assigning //to the scroll event. } //I have omitted clearing the interval but you would want to do that, perhaps on page change, or something. //clearInterval(interval); })();