var touchStartX = 0;

var currentPage = 1;

var step = 30;

var validFlipDistance = 30;

var mash = document.querySelector("#app > .mash");

var story = document.querySelector("#app > .story");

var screenWidth = story.clientWidth;

​

mash && mash.addEventListener('touchstart', function(e){

  var touch = e.changedTouches[0];

 touchStartX = touch.pageX;

}, false);

​

mash && mash.addEventListener('touchmove', function(e){

  var touch = e.changedTouches[0];

  var moveingfPageX = touch.pageX;

  var distance = -(moveingfPageX - touchStartX);

  var currentPageScrollLeft = (currentPage - 1) * screenWidth;

​

  story.scrollLeft = currentPageScrollLeft + distance;

}, false);

​

mash && mash.addEventListener('touchend', function(e){

  var touch = e.changedTouches[0];

  var touchEndX = touch.pageX;

  var isNext = touchEndX - touchStartX < 0;

  var oldCurrentPage = currentPage;

  var isValid = Math.abs(touchEndX - touchStartX) >= validFlipDistance;

  var maxPage = story.children.length;

  var minPage = 1;

  if(isValid) {

    currentPage = isNext ? currentPage + 1 : currentPage - 1;

    currentPage = currentPage > maxPage ? maxPage : currentPage;

    currentPage = currentPage < minPage ? minPage : currentPage;

  } else {

    isNext = !isNext;

  }

​

  var targetScrollLeft = (currentPage - 1) * screenWidth;

  animate(function() {

    var scrollLeft = story.scrollLeft;

​

    scrollLeft = isNext ? scrollLeft + step : scrollLeft - step;

​

    if(isNext && scrollLeft > targetScrollLeft) {

      story.scrollLeft = targetScrollLeft;

      return false;

    } else if(!isNext && scrollLeft < targetScrollLeft){

      story.scrollLeft = targetScrollLeft;

      return false;

    } else {

      story.scrollLeft = scrollLeft;

      return true;

    }

  });

});

​

function animate(callback) {

  var _animate = function(){

    var isValid = callback && callback();

    isValid && requestAnimationFrame(_animate);

  };

​

  requestAnimationFrame(_animate);

}