swipe detection

Swipe.js

let xDown = null;
let yDown = null;

function handleTouchStart(e) {
  xDown = e.touches[0].clientX;
  yDown = e.touches[0].clientY;
}

function handleTouchMove(e) {
  if (!xDown || !yDown) {
    return;
  }

  const xUp = e.touches[0].clientX;
  const yUp = e.touches[0].clientY;

  const xDiff = xDown - xUp;
  const yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) {
    if (xDiff > 0) {
      // left swipe
      console.log('left');
    } else {
      // right swipe
      console.log('right');
    }
  } else {
    if (yDiff > 0) {
      // up swipe
      console.log('up');
    } else {
      // down swipe
      console.log('down');
    }
  }
  // reset values
  xDown = null;
  yDown = null;
}

document.addEventListener('touchstart', handleTouchStart, { passive: true });
document.addEventListener('touchmove', handleTouchMove, { passive: true });