利用JS实现scroll自定义滚动效果详解

handleTouchMove(event){
 event.preventDefault();
 this.currentY = event.targetTouches[0].screenY;
 this.currentTime = new Date().getTime();
 // 二次及以上次数滚动（间歇性滚动）时间和路程重置计算，0.05是间歇性滚动的停顿位移和时间比
 if (Math.abs(this.currentY - this.lastY) / Math.abs(this.currentTime - this.lastTime) < 0.05) {
  this.startTime = new Date().getTime();
  this.resetY = this.currentY;
 }
 this.distance = this.currentY - this.startY;
 let temDis = this.distance + this.oldY;
 /设置移动最小值/
 temDis = temDis > this.minValue ? temDis  1 / 3 : temDis;
 /设置移动最大值/
 temDis = temDis < -this.maxValue ? -this.maxValue + (temDis + this.maxValue)  1 / 3 : temDis;
 this.$el.style[""] = temDis + 'px';
 this.lastY = this.currentY;
 this.lastTime = this.currentTime;
 this.dispatchEvent();
 this.scrollFunc(event);
},

handleTouchEnd(event){
 /点透事件允许通过/
 if (!this.distance) return;
 event.preventDefault();
 let temDis = this.distance + this.oldY;
 /计算缓动值/
 temDis = this.puteSlowMotion(temDis);
 /设置最小值/
 temDis = temDis > this.minValue ? this.minValue : temDis;
 /设置最大值/
 temDis = temDis < -this.maxValue ? -this.maxValue : temDis;
 this.$el.style["transitionDuration"] = '500ms';
 this.$el.style["transitionTimingFunction"] = 'ease-out';
 /确定最终的滚动位置/
 setTimeout(()=> {
  this.$el.style[""] = temDis + 'px';
 }, 0);
 // 判断使用哪一种监听事件
 if (this.slowMotionFlag) {
  this.dispatchEventLoop();
 } else {
  this.dispatchEvent();
 }
 this.$el.addEventListener('transitionend', ()=> {
  window.cancelAnimationFrame(this.timer);
 });
 this.scrollFunc(event);
}

// 计算惯性滚动值
puteSlowMotion(temDis){
 var duration = new Date().getTime() - this.startTime;
 // 300毫秒是判断间隔的最佳时间
 var resetDistance = this.currentY - this.resetY;
 if (duration < 300 && Math.abs(resetDistance) > 10) {
  var speed = Math.abs(resetDistance) / duration,
   destination;
  // 末速度为0 距离等于初速度的平方除以2倍加速度
  destination = (speed  speed) / (2  this.deceleration)  (resetDistance < 0 ? -1 : 1);
  this.slowMotionFlag = true;
  return temDis += destination;
 } else {
  this.slowMotionFlag = false;
  return temDis;
 }
},