Svelte 中的滑动动作超出范围

Question

我正在制作一个水平通过 .cards div 部分的应用程序。

<div class="cards" on:touchstart={handleTouchStart}
on:touchmove={handleTouchMove}
on:touchend={handleTouchEnd}>
<About/>
<Services/>
<Contact/>
</div>

手柄触摸功能可以很好地通过滑动移动 div，但如果它到达 div 的末尾，我似乎无法禁用滑动。这是我到目前为止得到的

 const handleTouchStart = (event) => {
    startX = event.touches[0].clientX;
};

const handleTouchMove = (event) => {
    const currentX = event.touches[0].clientX;
    dist = startX - currentX;
    console.log(distance)
    if (distance===0 && dist < 0){
        dist=0
    }
    if (distance<-200){
        dist=0
    }
};

const handleTouchEnd = () => {
    if (dist > 0) {
        // Swipe left
        goRight();
} else if (dist < 0) {
  // Swipe right
  goLeft();
}
};

handleTouchMove 中的第一个 if 语句按预期工作，但第二个不是。我试过 else 如果我试过 <= instead of <, and I tried changing the value in the condition (the div is 300vw wide). None of them has any effect.

Answer 1

我明白了，修复其实超级简单！ 首先，我将 2 条语句合二为一，然后修复它的实际上是寻找大于 0 的 dist 而不是小于 0 的 dist，这意味着向另一个方向滑动。这是有效的 if 语句。

if ((distance === 0 && dist < 0) || (distance <= -200 && dist > 0)){
        dist=0
    }