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

Question

我有 2 divs（左和右），我想在右边的基础上向左滚动。 https://jsfiddle.net/3jdsazhg/2/

这在桌面上运行良好，但是当我切换到移动设备时，就不再流畅了... 通过更改

可以很容易地注意到这一点

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

到

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

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

我想知道这不流畅的确切原因...我知道这不是动画。 div 上的简单动画很流畅，基于滚动时会出现问题。
如何让这个动画流畅？

Answer 1

它可能不稳定，因为它在滚动时会被触发很多，事实上我很确定 IOS 移动设备会在用户滚动时暂停 javascript 执行。

相反，我建议使用间隔，您可以将每个间隔之间的时间调整为适合您的用例的时间。

虽然在使用滚动事件时每 X 毫秒触发一次此逻辑似乎很密集，但您可能每秒触发该事件数百次，这对于使用的用户来说会更加密集和明显处理能力有限的设备。

(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);
})();

Answer 2

终于想出办法了

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

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

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

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

JavaScript scroll based animation is choppy on mobile

javascript

animation

mobile

scroll

smooth-scrolling