Swiping mnotion goes out of bounds in Svelte

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){
        distance=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.