Заблокируйте вертикальную свиток родителя, когда горизонтально проводят ребенка ⇐ Javascript

[Anonymous]

Я пишу крюк, который позволит мне слушать действия по удару на элементе. Проблема в том, что я получаю раздражающее вертикальное перетаскивание при попытке перемещаться по горизонтали. Мне удалось достичь желаемого поведения, заблокировав вертикальную прокрутку родителя после обнаружения этого горизонтального удара, перемещающегося влево или вправо.

Код: Выделить всё

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.< /code>
Я попытался проверить правдивую e.cancelable < /code>, но затем крюк перестает работать.
Как это исправить? < /p>
Вот крюк: < /p>
import { useRef } from "react";

export const useSwipe = () => {
const touchStartX = useRef(null);
const touchEndX = useRef(null);
const touchStartY = useRef(null);
const touchEndY = useRef(null);

const minSwipeDistance = 100;

const box = document.getElementById("scrollable-cards-box");

const cancelTouch = (e: TouchEvent) => e.preventDefault();

const onTouchStart = (e: React.TouchEvent) => {
touchEndX.current = null;
touchEndY.current = null;
touchStartX.current = e.targetTouches[0].clientX;
touchStartY.current = e.targetTouches[0].clientY;
};

const onTouchMove = (e: React.TouchEvent) => {
touchEndX.current = e.targetTouches[0].clientX;
touchEndY.current = e.targetTouches[0].clientY;

if (!touchStartY.current || !touchEndY.current) return;
if (!touchStartX.current || !touchEndX.current) return;
//something here causes the error
if (
touchEndX.current > touchStartX.current + 5 ||
touchEndX.current < touchStartX.current - 5
) {
if (box) {
box.addEventListener("touchmove", cancelTouch, {
passive: false,
});
box.style.touchAction = "none";
console.log("set touch to none");
}
}
};

const onTouchEnd = () => {
if (!touchStartX.current || !touchEndX.current) return;
const distanceX = touchStartX.current - touchEndX.current;
const isLeftSwipe = distanceX > minSwipeDistance;
const isRightSwipe = distanceX < -minSwipeDistance;
if (box) {
box.style.touchAction = "auto";
console.log("set touch to autoo");
box.removeEventListener("touchmove", cancelTouch);
}
if (isRightSwipe) return "right";
if (isLeftSwipe) return "left";
};

return { onTouchStart, onTouchMove, onTouchEnd };
};

Я использую возвращаемые функции на одноименных реквизитах дочерних элементов и добавляю слушателя событий к родителю.

Подробнее здесь: https://stackoverflow.com/questions/795 ... ng-a-child