Swiping motion goes out of bounds in Svelte

Question

I am making an app that goes through the sections of .cards div horizontally.

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

The handle touch functions work just fine moving the div by swiping, but I can't seem to disable swiping if it reaches the end of the div. Here's what I got so far

 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();
}
};

The first if statement in handleTouchMove works as expected, but the second is not. I tried putting as else if, I tried <= instead of <, and I tried changing the value in the condition (the div is 300vw wide). None of them has any effect.

Answer 1

I got it, the fix was actually super simple! First of all, I combined the 2 statements into one, then what fixed it was actually looking for dist bigger that 0 rather than smaller than 0 which translates to swiping in the other direction. Here's the working if statement.

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