#javascript #animation #mobile #scroll #smooth-scrolling
#javascript #Анимация #Мобильный #прокрутка #плавная прокрутка
Вопрос:
У меня есть 2 раздела (слева и справа), и я хочу прокручивать влево на основе вправо. https://jsfiddle.net/3jdsazhg/2 /
Это отлично работает на рабочем столе, но когда я переключаюсь на мобильный, это уже не так гладко… Это можно очень легко заметить, изменив
_left.style.top = _content.scrollTop - (_content.scrollTop * ratioLeftRight) 'px';
Для
_left.style.top = _content.scrollTop 'px';
Где она должна действовать как div с фиксированным расположением
- Я хотел бы знать точную причину, по которой это не гладко… Я знаю, что это не анимация. Простая анимация в div плавная, проблема возникает, когда она основана на прокрутке.
- Как я могу сделать эту анимацию плавной?
Комментарии:
1. Я предполагаю, что это зависит от того, как часто конкретный браузер обновляет
scrollTop
свойство элемента при прокрутке?2. Это происходит и в Chrome, если вы открываете inspect element и выбираете mobile view…
Ответ №1:
Вероятно, она изменчива, потому что при прокрутке она часто запускается, на самом деле я почти уверен, что 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);
})();
Комментарии:
1. это не проблема, в этом случае то же самое произошло бы и в настольной версии, и на всякий случай я уже пробовал это…
2. @Inc33 Процессор на рабочем столе, несомненно, затмит процессор на мобильном устройстве, поэтому вы не заметите его на рабочем столе, поскольку он способен обрабатывать огромное количество последовательных вызовов функций. Подумайте об играх: игра, которая не является гладкой на вашем мобильном устройстве, скорее всего, будет очень гладкой на вашем рабочем столе. Подключение к событию прокрутки — плохая практика для полной остановки мобильных устройств :).
3. вы можете воспроизвести эту проблему, открыв ее на рабочем столе, а затем эмулировать мобильную версию. Таким образом, у вас будет процессор того же компьютера и все та же проблема…
4. Вы пробовали этот код на реальном мобильном устройстве? Также вы часто играли со значением time_between_interval?
Ответ №2:
Мне наконец удалось придумать решение.
С моей точки зрения, я предполагаю, что мобильное представление запускает событие прокрутки реже, и поскольку мы прокручиваем оболочку, мы сначала прокручиваем всю страницу, а затем прокручиваем назад с помощью js левую часть, и поскольку она отличается от настольной версии, эта проблема становится видимой…
Решение состояло в том, чтобы изменить левую сторону на фиксированную позицию и вычитать сверху, а не добавлять к ней.
_left.style.top = -(_content.scrollTop * ratioLeftRight) 'px';