JavaScript scroll based animation is choppy on mobile

Question

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

This works fine on desktop, but when i change to mobile, it's not smooth anymore... 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 it should act as a fixed positioned div

1. I would like to know the exact reason why this isn't smooth... I know that it's not the animation. Simple animation on the div is smooth, the issue comes up when it's based on scroll.
2. How can i make this animation smooth?

Answer 1

I finally managed to think out a solution.

From my point of view, i'm guessing the mobile view fires the scroll event less often and because we are scrolling the wrapper, we first scroll the whole page and then scroll back with js the left part and because it's different from the desktop version, this issue becomes visible...

The solution was to change the left side to fixed position, and substract from the top instead of adding to it.

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