小编给大家分享一下如何利用JS实现scroll自定义滚动效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了保靖免费建站欢迎大家使用！
1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。
选择滚动监听的事件
因为是自定义手机端的滚动事件，那我选择的是监听手机端的三个touch事件来实现监听，并实现了两种滚动效果，一种是通过-webkit-transform，一种是通过top属性。两种实现对于滚动的基本效果够能达到，可是top的不适合滚动中还存在滚动，可是能解决滚动中存在postion:fixed属性的问题；而transform可以实现滚动中有滚动，可是又不能解决postion:fixed的问题，所以，最后选择性考虑使用哪一种实现方式，用法一样。
主要的实现业务逻辑
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["top"] = temDis + 'px';
this.lastY = this.currentY;
this.lastTime = this.currentTime;
this.dispatchEvent();
this.scrollFunc(event);
},代码解读：这是监听touchmove事件的回调，其中主要计算出目标节点this.$el的top或者-webkit-transform中translateY的值，而计算的参考主要以事件节点的screenY的垂直移动距离为参考，当然其中还要判断一下最大值和最小值，为了保证移动可以的超出最大值小值一定的距离所以加了一个1/3的移动计算。这里可能主要到了有一个间歇性滚动的判断和计算，主要是服务于惯性滚动的，目的是让惯性滚动的值更加精确。
handleTouchEnd(event){
/*点透事件允许通过*/
if (!this.distance) return;
event.preventDefault();
let temDis = this.distance + this.oldY;
/*计算缓动值*/
temDis = this.computeSlowMotion(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["top"] = temDis + 'px';
}, 0);
// 判断使用哪一种监听事件
if (this.slowMotionFlag) {
this.dispatchEventLoop();
} else {
this.dispatchEvent();
}
this.$el.addEventListener('transitionend', ()=> {
window.cancelAnimationFrame(this.timer);
});
this.scrollFunc(event);
}代码解读：这是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的经验值。
以上是“如何利用JS实现scroll自定义滚动效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
