基于JavaScript滚动的动画在移动设备上不稳定

Question

我有2个div(左和右),我想根据右边滚动左边. https://jsfiddle.net/3jdsazhg/2/

这在桌面上运行良好,但是当我改用移动设备时,它不再平滑......这可以很容易地被注意到,通过改变

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

至

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

它应该作为一个固定的定位div

1. 我想知道为什么这不顺利的确切原因......我知道这不是动画.div上的简单动画很流畅,当它基于滚动时会出现问题.
2. 如何让这个动画流畅？

Answer 1

我终于想出了一个解决办法。

从我的角度来看，我猜测移动视图触发滚动事件的频率较低，因为我们正在滚动包装器，所以我们首先滚动整个页面，然后使用 js 向后滚动左侧部分，因为它与桌面版本不同，这个问题变得可见......

解决方案是将左侧更改为固定位置，并从顶部减去而不是添加。

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