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

Posted 2023-05-09

【中文标题】基于 JavaScript 滚动的动画在移动设备上不稳定

【英文标题】：JavaScript scroll based animation is choppy on mobile

【发布时间】：2017-02-23 12:45:09

【问题描述】：

我有 2 个 div（左右），我想根据右侧滚动左侧。 https://jsfiddle.net/3jdsazhg/2/

这在台式机上运行良好，但是当我更改为移动设备时，它不再流畅了... 这可以很容易地注意到，通过改变

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

到

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

它应该作为固定定位的 div 的位置

我想知道这不流畅的确切原因...我知道这不是动画。 div上的简单动画很流畅，基于滚动的时候问题就来了。 如何使这个动画流畅？

【问题讨论】：

我猜这取决于特定浏览器在滚动时更新元素的scrollTop属性的频率？

如果您打开检查元素并选择移动视图，Chrome 也会发生这种情况...

【参考方案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);
)();

【讨论】：

这不是问题，在那种情况下，它也会在桌面版本上发生同样的事情，以防万一我已经尝试过......

@Inc33 台式机上的处理器无疑会使移动设备上的处理器相形见绌，因此您不会在台式机上注意到它，因为它能够处理大量连续的函数调用。想想游戏，在您的手机上不流畅的游戏在您的桌面上可能非常流畅。挂钩滚动事件对于移动句号来说是一种不好的做法:)。

您可以重现此问题，方法是在桌面上打开它，然后模拟移动版本。这样，您将拥有同一台 PC 的处理器，但仍然存在相同的问题...

您是否在实际的移动设备上尝试过此代码？你也经常使用 time_between_interval 值吗？

【参考方案2】：

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

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

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

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