JavaScript-анимация на основе прокрутки изменена на мобильном телефоне

Question

У меня есть 2 divs (влево и вправо), и я хочу прокрутить левую букву справа. https://jsfiddle.net/3jdsazhg/2/

Это прекрасно работает на рабочем столе, но когда я изменить на мобильный, он не сглаживать больше ... Это можно заметить очень легко, изменив

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

в

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

Там, где он должен действовать как фиксированный позиционер div

1. Мне хотелось бы узнать точную причину, почему это негласно ... Я знаю, что это не анимация. Простая анимация на div гладкая, проблема возникает, когда она основана на прокрутке.
2. Как я могу сделать эту анимацию гладкой?

Answer 1

Мне, наконец, удалось придумать решение.

С моей точки зрения, я предполагаю, что мобильный вид реже пропускает событие прокрутки реже, и поскольку мы прокручиваем оболочку, сначала прокручиваем всю страницу, а затем прокручиваем назад с левой стороны js и потому, что она различна из настольной версии эта проблема становится видимой ...

Решение заключалось в том, чтобы изменить левую сторону на фиксированное положение и выровнять сверху, а не добавлять к ней.

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

Answer 2

Это, вероятно, прерывисто, потому что при прокрутке он горит ТОЛЬКО, на самом деле я уверен, что 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); 
})();