前言
最近在公司开发项目的时候，原生滚动条中有些东西没办法自定义去精细的控制，于是开发一个类似于better-scroll一样的浏览器滚动监听的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的经验值。
总结
大概的流程和思考就是这样了，后续还会增加更多的功能进行扩展
附上git地址：https://github.com/yejiaming/scroll
相关推荐：
关于jquery滚动插件scrollable.js用法分析
微信小程序scroll-view组件详解
vue利用better-scroll实现轮播图与页面滚动
以上就是js实现scroll自定义滚动效果的详细内容。