@an6re9

Проблема с вертикальной прокруткой в браузерах на ios?

имеется верстка: 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);
  }
}
  • Вопрос задан
  • 70 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы