JavaScript的滚动式动画是移动

波涛汹涌我有2周的div（左，右），我想滚动基础上，对左边。 https://jsfiddle.net/3jdsazhg/2/JavaScript的滚动式动画是移动

这正常的桌面，但是当我改变为移动，它不再顺畅... 这可以很容易地发现，通过改变

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

到

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

它应该作为一个固定位置的分区

我想知道为什么这不光滑的确切原因......我知道这不是动画。 div上的简单动画非常流畅，当它基于滚动时会出现问题。
我该如何让这个动画流畅？

来源

2016-10-14 Inc33

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

这发生在铬为好，如果你打开检查元素，然后选择移动视图... – Inc33

我终于设法想出了一个解决方案。

从我的角度来看，我猜移动视图不太经常触发滚动事件，因为我们滚动包装，我们首先滚动整个页面，然后用js向左滚动，因为它是不同的从桌面版本，这个问题变得可见......

的解决方案是左侧固定的位置，并从。减去顶部，而不是向它改变。

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

来源

2016-10-20 13:07:09 Inc33

它可能是不稳定的，因为它正在被ALOT滚动时被触发，实际上我非常确定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); 
})();

来源

2016-10-19 12:27:11

这不是问题，在这种情况下它会发生在桌面版本同样的事情，以及和以防万一我已经尝试过这个.. 。 – Inc33

@ Inc33在桌面上的处理器，无疑是要矮一个移动设备上的处理器，所以你不会注意到它放在桌面上，因为它能够处理连续的函数调用的大量。想想游戏，手机上不流畅的游戏可能在您的桌面上非常流畅。挂在滚动事件是一个不好的做法，为移动的完整:)。 –

您可以通过在桌面上打开它来重现此问题，然后模拟移动版本。这样，你将有同一台PC的处理器，仍然有相同的问题... – Inc33

JavaScript的滚动式动画是移动

回答

相关问题