This website requires JavaScript.

January 1, 2021

Detect Horizontal Swipe

Detect horizontal swipe
Copy
js
// 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