Horizontal Touch Scroll Animation

horizontalScroll.js

var jzhg = (function(){
  let navDom = document.querySelector('.zyee-jzhg-nav');
  let nav = $('.zyee-jzhg-nav');
  let navWidth = nav.width(),
      domWidth = $(document).width(),
      maxTransformX = navWidth - domWidth;

  let touchStartX,
      touchMoveX,
      moveX,
      offsetX = 0,
      shouldMoveX,
      touchEndX;


  const setStyle = function(e, c) {
      for (name in c) {
          e.style[name] = c[name]
      }
  }

  const onTouchStart = function(e){
    touchStartX = e.touches[0].pageX;
  };

  const onTouchMove = function(e){
    touchMoveX = e.touches[0].pageX;
    moveX = touchStartX - touchMoveX;
    shouldMoveX = offsetX - moveX;
    setStyle(navDom,{
      WebkitTransform: "translate3d(" + shouldMoveX + "px, 0px, 0px)",
      transform: "translate3d(" + shouldMoveX + "px, 0px, 0px)"
    });
  }

  const onTouchEnd = function(e){
    if (shouldMoveX*-1 >= maxTransformX) {//向左移动到最大位置
      setStyle(navDom,{
        WebkitTransform: "translate3d(-" + maxTransformX + "px, 0px, 0px)",
        transform: "translate3d(-" + maxTransformX + "px, 0px, 0px)",
        WebkitTransition: "all 300ms cubic-bezier(.25, .1, .25, 1)",
        transition: "all 300ms cubic-bezier(.25, .1, .25, 1)",
      });
      offsetX = -1*maxTransformX;
    } else if (shouldMoveX > 0) {//向右移动时
      setStyle(navDom,{
        WebkitTransform: "translate3d(-" + 0 + "px, 0px, 0px)",
        transform: "translate3d(-" + 0 + "px, 0px, 0px)",
        WebkitTransition: "all 300ms cubic-bezier(.25, .1, .25, 1)",
        transition: "all 300ms cubic-bezier(.25, .1, .25, 1)",
      });
      offsetX = 0;
    } else {//正常情况
      console.log('normal');
      offsetX = nav.offset().left;
    }
  }

  const onTransitionEnd = function(e){
    setStyle(navDom,{
      WebkitTransition: "none",
      transition: "none",
    });
  }

  const bindEvents = function() {
    nav.on('touchstart', onTouchStart);
    nav.on('touchmove', onTouchMove);
    nav.on('touchend', onTouchEnd);
    nav.on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', onTransitionEnd)
  };

  const init = bindEvents;

  return {
    init: init
  };

})();

jzhg.init();