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

前端之家收集整理的这篇文章主要介绍了基于JavaScript滚动的动画在移动设备上不稳定前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有2个div(左和右),我想根据右边滚动左边.
https://jsfiddle.net/3jdsazhg/2/

这在桌面上工作正常,但当我改为移动时,它不再流畅……
通过改变可以很容易地注意到这一点

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

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

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

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

解决方法

它可能很不稳定,因为它在滚动时被点燃了,事实上我很确定IOS mobile会在用户滚动时暂停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);
})();

猜你在找的JavaScript相关文章