如何在垂直滚动时阻止水平滑动功能(在手机上)

Question

我有一个函数可以对对象进行水平滑动。如何在垂直滚动页面时阻止水平滑动功能/事件。

我想好了如何阻止垂直滚动，但我找不到水平滚动的解决方案，也许有人面临类似的问题，可以提出解决方案的算法，或者有人还有一些基础？

下面是一个关于代码盒的完整示例(仅适用于触摸事件(。

https://codesandbox.io/s/long-architecture-0k6rb?file=/src/scroll.js:2945-3250&分辨率宽度=1072&分辨率高度=675

let ref = useRef();
const [state, setState] = useState({
isScrolling: false,
clientX: 0, 
scrollX: 0 
});
const touchStartHandler = (e) => {
if (ref && ref.current && !ref.current.contains(e.target)) {
return;
}
e.preventDefault();
setState({
...state,
isScrolling: true,
clientX: e.touches[0].clientX
});
};
const touchMoveHandler = (e) => {
if (ref && ref.current && !ref.current.contains(e.target)) {
return;
}
e.preventDefault();
const { clientX, scrollX, isScrolling } = state;
if (isScrolling === true) {
let sX = scrollX - e.touches[0].clientX + clientX;
let cX = e.touches[0].clientX;
if (sX < -0) {
sX = 0;
} else if (sX >= 0 && sX <= 1800) {
ref.current.scrollLeft = sX;
}
setState({
...state,
scrollX: sX,
clientX: cX
});
}
};
const touchEndHandler = (e) => {
if (ref && ref.current && !ref.current.contains(e.target)) {
return;
}
e.preventDefault();
setState({
...state,
isScrolling: false
});
};

useEffect(() => {
document.addEventListener("touchstart", touchStartHandler);
document.addEventListener("touchmove", touchMoveHandler);
document.addEventListener("touchend", touchEndHandler);
return () => {                                               document.removeEventListener("touchstart", touchStartHandler);                  
document.removeEventListener("touchmove", touchMoveHandler);
document.removeEventListener("touchend", touchEndHandler);
};
});

return (
<div className={classes.charPage}>
<div
className={classes.items}
ref={ref}
onTouchStart={touchStartHandler}
onTouchMove={touchMoveHandler}
onTouchEnd={touchEndHandler}
>
{scrollBar}
</div>
</div>
);

Answer 1

const [state, setState] = useState({
isScrolling: false,
clientX: 0, 
scrollX: 0,
clientY: 0,
scrollY: 0 
});
...
clientY: e.touches[0].clientY
...
const { clientX, scrollX, clientY, scrollY, isScrolling } = state;
...
let sY = scrollY - e.touches[0].clientY + clientY;
let cY = e.touches[0].clientY;
if (sY < -0) {
sY = 0;
} else if (sY >= 0 && sY <= 1800) {
ref.current.scrollTop = sY;
}
...
scrollY: sY,
clientY: cY