利用JS实现scroll自定义滚动效果详解(2)
代码解读:这是touchend事件监听的回调,其中这里要判断是否要拦截click和tap事件,并且这里还要计算惯性缓动值,设置最终的最大最小值,以及设置动画效果和缓动效果。下面来谈一下滚性滚动的计算:
// 计算惯性滚动值 computeSlowMotion(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; } },
代码解读:滚性滚动的算法主要是根据一个路程和时间计算出初速度,以及原生滚动的加速度的大于值0.006来计算滚动的总位移。这里主要还要判断一下一个300ms的经验值。
总结
大概的流程和思考就是这样了,后续还会增加更多的功能进行扩展
附上git地址:https://github.com/yejiaming/scroll
本地下载:http://xiazai.jb51.net/201710/yuanma/js-scroll-custom(jb51.net).rar
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对黑区网络的支持。