Всех приветствую!
Проблема в жестких лагах при перерисовке, когда пользователь свайпает элемент не ровно по оси Х, но добавляет скролл по Y. Суть проблемы на
видео.
JS-функция, которая реализует перерисовку ниже. Некоторые коллбеки закоментировал, результата по производительности положительного нет.
function moveS () {
var evt = getEvent();
var targetInput, targetInputW, left, right;
targetInput = targetPrElem.getAttribute('classre');
targetInput == 'maxPrice' ? targetInputW = 'minPrice' : targetInputW = 'maxPrice';
left = priceSlide.querySelector('.leftM');
right = priceSlide.querySelector('.rightM');
leftM = parseInt(left.style.left);
rightM = parseInt(right.style.left);
if (rightM < leftM) {
leftM = parseInt(right.style.left);
rightM = parseInt(left.style.left);
targetInput = targetInputW;
}
var newS = startS - (evt.clientX/widthSlide);
var res = Math.ceil((offsetPrSl - newS)*100)/100;
//slideLine (intoLine, left, right);
if (res >= 0 && res < maxLeftSlide) {
targetPrElem.style.left = (res*100)+'%';
//priceRe (targetInput, maxValForm*res);
}
else if (res == maxLeftSlide) {
targetPrElem.style.left = (res*100)+'%';
//priceRe (targetInput, maxValForm);
}
else {return}
}
Проверил производительность через DevTools - смущает время, затраченное на анимацию, но посредством нескольких проверок установил, что это не влияет на лаги.
Есть какие-то соображения по реализации аналогичного функционала, но без лагов? Желательно без библиотек и фреймворков.
На элементе стоит
touch-action: none, но при более-менее сильном свайпе перестаёт работать, что тоже я пока объяснить не могу.
Большое спасибо!
