如何将最小移动更改为滚动 CSS / JS

Question

我有一个非常大的水平相对旋转木马，通常我通过单击按钮来处理更改图像，效果非常好，但所有内容也是可滚动的

overflow: auto

，但是隐藏了滚动条。

我为移动设备添加了一些 touchEvents，我的目标是使触摸行为与按钮点击行为相同。它们工作正常，但我的问题是我也在使用

scroll-snap-type: x mandatory

，我觉得它需要不到 100px 才能移动到另一个图像。有时它会阻止我的

handleNext()

或

handlePrev()

开火。我不想低于 100px

我的反应组件：

function handleTouchEnd() {
    if (touchStart && touchEnd) {
        if (touchStart - touchEnd > 100) {
            handleNext()                          // moves to right image
        } else if (touchStart - touchEnd < -100) {
            handlePrev()                         // moves to left image
        }
    }
}

return (
    <div className={s.pageWrapper}>
        onTouchStart={(e) => setTouchStart(e.targetTouches[0].clientX)}
        onTouchMove={(e) => setTouchEnd(e.targetTouches[0].clientX)}
        onTouchEnd={handleTouchEnd}