имеется верстка:
https://an6re9.github.io/dist/
Блок "План работы" на мобилках пролистывается влево-вправо, добавил ему проверку, что если курсор передвигается больше по оси y чем x, то прокручиваем страницу вертикально, на андроиде все отлично. Но на ios страницу начинает "колбасить", не понимаю, то ли высчитывает координаты иначе, то ли как-то по своему скролит поверх моего события.
В чем может быть проблема? Наблюдается на айфоне в хроме и сафари.
P.S. знаю что верстка тормозит, это тоже только на айфонах, из-за св-ва filter оно скоро будет убрано.
Код функции:
function moveHandler(e) {
e.preventDefault();
const deltaY = e.clientY - pointerStartPosition.y;
const deltaX = e.clientX - pointerStartPosition.x;
console.log("scrollTop :" + document.documentElement.scrollTop);
console.log("deltaY :" + deltaY);
if (Math.abs(deltaY) > Math.abs(deltaX)) {
window.scrollTo(0, scrollTopValue - deltaY);
} else {
target.style.left = `${offset + deltaX}px`;
}
function downHandler(e) {
e.preventDefault();
offset = getCurrentOffset();
pointerStartPosition = { x: e.clientX, y: e.clientY };
scrollTopValue = window.scrollY;
target.style.left = `${offset}px`;
target.addEventListener("pointermove", moveHandler);
target.removeEventListener("pointerdown", downHandler);
target.addEventListener("pointerup", upHandler);
}
function upHandler() {
const currentOffset = getCurrentOffset();
const residual = getResidual();
const parentWidth = getWidth(parent);
target.removeEventListener("pointermove", moveHandler);
target.addEventListener("pointerdown", downHandler);
target.style.transition = "left 0.3s";
if (Math.abs(currentOffset) >= residual) {
target.style.left = `-${residual}px`;
}
if (currentOffset > 0) {
target.style.left = 0;
}
setTimeout(() => (target.style.transition = "none"), 400);
}
}