Developer Snippet

Detect Horizontal Swipe

Detect horizontal (left/right) swipe gesture on mobile touch devices with JavaScript.

#javascript#mobile

// Detect horizontal swipe
!(function detectHorizontalSwipe() {
  let touchstartX = 0;
  let touchendX = 0;

  const body = document.querySelector("body");

  function handleGesture() {
    if (touchendX < touchstartX) alert("swiped left!");
    if (touchendX > touchstartX) alert("swiped right!");
  }

  body.addEventListener("touchstart", (e) => {
    touchstartX = e.changedTouches[0].screenX;
  });

  body.addEventListener("touchend", (e) => {
    touchendX = e.changedTouches[0].screenX;
    handleGesture();
  });
})();

Further reading