基于JavaScript滚动的动画在手机上是不稳定的

JavaScript scroll based animation is choppy on mobile

本文关键字：不稳定 手机 动画 JavaScript 滚动 基于      更新时间：2023-09-26

我有两个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. 我如何使这个动画平滑?

这可能是不稳定的，因为它被触发时，滚动，事实上，我很确定IOS移动暂停javascript的执行，而用户正在滚动。

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

虽然在使用scroll事件时每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);
})();

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

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

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

_left.style.top = -(_content.scrollTop * ratioLeftRight) + 'px';
相关文章：