js 没有滚动条，js控制页面滚动

描述：一个全屏页面，页面很长，但是没有滚动条，需要用按住鼠标往上滑拖动页面往上滚动，或者用滚轮控制页面上下滚动。

出现的问题：鼠标拖动页面移动时，有时候鼠标已经松开了，但是页面还跟着鼠标移动。

代码:

var pageW = 1366, pageH = 600;
var minTransY = -1400; maxTransY = 0;

var $allPage = $(".all-page");
var allPageHeight = 2000;
var canScroll = true;

$(function(){
//// mouseFuc
var mouseFuc = {
  // 设置页面滚动方向，只有滚轮事件才设置
  setPageDirection: function(delta) {
    // 以chrome为标准
    if (delta < 0) {
      mouseEvent.pageDirect = "up";
    } else {
      mouseEvent.pageDirect = "down";
    }
  },
  scrollActionFn: function(){
    var y = 0;
    if (mouseEvent.pageDirect === "up") {
      y = -50;
    } else {
      y = 50;
    }
    util.setTranslateFn(0,y,0);
  }
};
//// 鼠标移动事件
var startEvent = "mousedown",
    moveEvent = "mousemove",
    endEvent = "mouseup";
var mouseEvent = {
  type: "PC", // Mobile
  isStart: false,
  y1: -1, // 上一次Y坐标，
  y2: -1, // 最新Y坐标，只有鼠标或触屏滑动才设置
  pageDirect: "none", // "up" "down" // 只有滚轮才设置
  scrollDistance: 0 // 鼠标huo触屏滑动的距离
};
if (typeof window.ontouchstart !== "undefined") {
  mouseEvent.type = "Mobile";
  startEvent = "touchstart",
  moveEvent = "touchmove",
  endEvent = "touchend";
}
document.body.addEventListener(moveEvent,function(event){
  if (mouseEvent.isStart) {
    var currentY;
    if (mouseEvent.type == "Mobile") {
      var touches = event.changedTouches || event.touches;
      currentY = touches[0].pageY;
    } else {
      currentY = event.pageY;
    }
    //console.log(event);
    if (mouseEvent.y1 === -1 && mouseEvent.y2 === -1) {
      mouseEvent.y1 = mouseEvent.y2 = currentY;
    } else {
      mouseEvent.y1 = mouseEvent.y2;
      mouseEvent.y2 = currentY;
      mouseEvent.scrollDistance = mouseEvent.y2 - mouseEvent.y1;
    }
    //console.log(mouseEvent.scrollDistance);
    util.setTranslateFn(0,mouseEvent.scrollDistance,0);
  }
});
document.body.addEventListener(startEvent,function(event){
  if (canScroll) {
    mouseEvent.isStart = true;
  }
});
document.body.addEventListener(endEvent,function(event){
  if (canScroll) {
    mouseEvent.isStart = false;
    mouseEvent.y1 = mouseEvent.y2 = -1
    //console.log("mouse end.")
  }
});
// 解决鼠标拖拽滑动页面，有时候监听不到鼠标弹起松开的事件
document.ondragstart = function(ev) {
  ev.preventDefault();
};
document.ondragend = function(ev) {
  ev.preventDefault();
};
//// 滚轮事件
if (typeof document.body.onmousewheel === "undefined") {
  // firefox
  document.body.addEventListener("DOMMouseScroll", function(event) {
    // event.wheelDelta undefined
    // event.detail 往鼠标后滚动滚轮 3 ,页面往上滑动
    // event.detail 往鼠标前滚动滚轮 -3 ,页面往下滑动
    // console.log(event,event.wheelDelta,event.detail);
    if (canScroll) {
      mouseFuc.setPageDirection(-event.detail);
      mouseFuc.scrollActionFn();
    }
  });
} else {
  // chrome及其他
  document.body.onmousewheel = function(event) {
    if (canScroll) {
      event = event || window.event;
      // event.detail 0
      // event.wheelDelta 往鼠标后滚动滚轮 -120 ,页面往上滑动
      // event.wheelDelta 往鼠标前滚动滚轮 120 ,页面往下滑动
      // console.log(event,event.wheelDelta,event.detail);
      mouseFuc.setPageDirection(event.wheelDelta);
      mouseFuc.scrollActionFn();
    }
  };
}
// util方法
var util = {
  setTranslateFn: function(x, y, z) {
    //console.log("translate3d("+x+"px,"+y+"px,"+z+"px)");
    var val = this.getTranslateFn();
    if (val) {
      y = val.transY + y;
    }
    if (y > maxTransY && val.transY === 0) {
      return false;
    } else if(y < minTransY && val.transY === minTransY) {
      $(".footer").not(".animated").addClass("animated");
      return false;
    } else if (y > maxTransY) {
      y = 0;
    } else if(y < minTransY) {
      y = minTransY;
    }
    $allPage.css({
      "webkitTransform":"translate3d("+x+"px,"+y+"px,"+z+"px)",
      "mozTransform":"translate3d("+x+"px,"+y+"px,"+z+"px)",
      "msTransform":"translate3d("+x+"px,"+y+"px,"+z+"px)",
      "transform":"translate3d("+x+"px,"+y+"px,"+z+"px)"
    });
    this.scrollAnimateFn();
    //console.log('getTranslateFn():', JSON.stringify(val));
  },
  getTranslateFn: function(){
    var val = $allPage.css("transform");
    //console.log(val);
    if (typeof val === "undefined" || val === "none") {
      return false;
    } else {
      var matrix;
      if (val.toString().indexOf("matrix3d") > -1) {
        // ie
        matrix = val.slice(7, val.length - 1).split(',');
        return {
          transX: parseFloat(matrix[12]),
          transY: parseFloat(matrix[13])
        }
      } else {
        // chrome or other
        matrix = val.slice(7, val.length - 1).split(',');
        return {
          transX: parseFloat(matrix[4]),
          transY: parseFloat(matrix[5])
        }
      }
    }
  },
  scrollAnimateFn: function() {
    var p50 = window.innerHeight / 2;
    var $p3 = $(".p3-ul").not(".animated");
    $p3.each(function(){
      if($(this).offset().top <= p50) {
        $(this).addClass("animated");
      }
    })
    var $p4 = $(".p4-box-two").add(".p4-process").not(".animated");
    $p4.each(function(){
      if($(this).offset().top <= p50) {
        $(this).addClass("animated");
      }
    })
  }
}
});