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的滾動式動畫是移動

回答

相關問題