swipe-navigation.js

(() => {
  let swipeStartX, swipeStartY, fingers

  addEventListener('touchstart', event => {
    if(isInput(event.target))
      return

    fingers = event.touches.length
    swipeStartX = event.changedTouches[0].clientX
    swipeStartY = event.changedTouches[0].clientY
  })

  addEventListener('touchend', event => {
    if(isInput(event.target))
      return

    if(isScrollable(event.target))
      return

    // skip if multiple fingers are touching the screen
    if(fingers > 1) return

    const movedX = event.changedTouches[0].clientX - swipeStartX
    const movedY = event.changedTouches[0].clientY - swipeStartY

    // skip if swipe was not very horizontal
    if(Math.abs(movedY) > 55) return

    // swipe at least 50px but under 400px
    if(movedX < -50 && movedX > -400){
    // swipe from right to leftc
      history.back()
    }else if(movedX > 50 && movedX < 400){
    // swipe from left to right
      history.forward()
    }
  })

  const isInput = e => {
    return e.nodeName === 'SELECT' ||
      e.nodeName === 'INPUT' ||
      e.nodeName === 'TEXTAREA' ||
      e.getAttribute("contenteditable") === "true"
  }

  const isScrollable = e => {
    const hasHorizontalScroll = e.scrollWidth > e.clientWidth
    return hasHorizontalScroll;
  }
  })()