作者：滴滴webapp架构组-付楠
BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。
为了满足这些场景，它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置，让滚动更加流畅，同时还提供了很多 API 方法和事件，以便我们更快地实现滚动场景下的需求，如下拉刷新、上拉加载。
由于它基于原生 JavaScript 实现，不依赖任何框架，所以既可以原生 JavaScript 引用，也可以与目前前端 MVVM 框架结合使用，比如，其官网上的示例就是与 Vue 的结合。
首先，让我们来看一下它是怎样让滚动更流畅的吧。
让滚动更流畅
在移动端，如果你使用过 overflow: scroll 生成一个滚动容器，会发现它的滚动是比较卡顿，呆滞的。为什么会出现这种情况呢？
因为我们早已习惯了目前的主流操作系统和浏览器视窗的滚动体验，比如滚动到边缘会有回弹，手指停止滑动以后还会按惯性继续滚动一会，手指快速滑动时页面也会快速滚动。而这种原生滚动容器却没有，就会让人感到卡顿。
BetterScroll 的滚动体验
试一试 BetterScroll 的滚动体验吧。体验地址
可以发现，在增加惯性滚动，边缘回弹等效果之后，明显流畅、舒服了很多。那么，这些效果是怎么实现的呢？
惯性滚动
BetterScroll 在用户滑动操作结束时，还会继续惯性滚动一段。首先看一下源码中的 BScroll.prototype._end 函数，这是 touchend、mouseup、touchcancel、mousecancel 事件的处理函数，也就是用户滚动操作结束时的逻辑。
BScroll.prototype._end = function (e) {
...
if (this.options.momentum && duration < this.options.momentumLimitTime && (absDistY > this.options.momentumLimitDistance || absDistX > this.options.momentumLimitDistance)) {
let momentumX = this.hasHorizontalScroll ? momentum(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options)
: {destination: newX, duration: 0}
let momentumY = this.hasVerticalScroll ? momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options)
: {destination: newY, duration: 0}
newX = momentumX.destination
newY = momentumY.destination
time = Math.max(momentumX.duration, momentumY.duration)
this.isInTransition = 1
}
...
}
以上代码的作用是，在用户滑动操作结束时，如果需要开启了惯性滚动，用 momentum 函数计算惯性滚动距离和时间。该函数，根据用户滑动操作的速度和 deceleration选项 ——惯性减速来计算滚动距离，至于滚动时间，也是一个可配置的选项。
function momentum(current, start, time, lowerMargin, wrapperSize, options) {
...
let distance = current - start
let speed = Math.abs(distance) / time
...
let duration = swipeTime
let destination = current + speed / deceleration * (distance < 0 ? -1 : 1)
...
}
边缘回弹
超过边缘时的回弹，有两个处理步骤，第一步是滚动到超过边界时速度要变慢，第二步是回弹到边界。其中，第一步是在源码的 BScroll.prototype._move 函数，这是 touchmove 和 mousemove 事件的处理函数，也就是在用户滑动操作过程中的逻辑。
// Slow down or stop if outside of the boundaries
if (newY > 0 || newY < this.maxScrollY) {
if (this.options.bounce) {
newY = this.y + deltaY / 3
} else {
newY = newY > 0 ? 0 : this.maxScrollY
}
}
第二步是调用BScroll.prototype.resetPosition函数，回弹到边界
BScroll.prototype.resetPosition = function (time = 0, easeing = ease.bounce) {
...
let y = this.y
if (!this.hasVerticalScroll || y > 0) {
y = 0
} else if (y < this.maxScrollY) {
y = this.maxScrollY
}
...
this.scrollTo(x, y, time, easeing)
...
}
流畅的滚动仅仅是基础，BetterScoll 真正的能力在于：提供了大量通用 / 定制的 option 选项 、 API 方法和事件，让各种滚动需求实现起来更高效。
作者：菠萝小萝卜
链接：https://juejin.im/post/59b777015188257e764c716f
来源：掘金
