作者：凹凸曼-吖伟
我们在平时编程开发时，除了需要关注技术实现、算法、代码效率等因素之外，更要把所学到的学科知识（如物理学、理论数学等等）灵活应用，毕竟理论和实践相辅相成、密不可分，这无论是对于我们的方案选型、还是技术实践理解都有非常大的帮助。今天就让我们一起来回顾中学物理知识，并灵活运用到惯性滚动的动效实现当中。
惯性滚动（也叫 滚动回弹，momentum-based scrolling）最早是出现在 iOS 系统中，是指 当用户在终端上滑动页面然后把手指挪开，页面不会马上停下而是继续保持一定时间的滚动效果，并且滚动的速度和持续时间是与滑动手势的强烈程度成正比。抽象地理解，就像高速行驶的列车制动后依然会往前行驶一段距离才会最终停下。而且在 iOS 系统中，当页面滚动到顶/底部时，还有可能触发 “回弹” 的效果。这里录制了微信 APP 【账单】页面中的 iOS 原生时间选择器的惯性滚动效果：
熟悉 CSS 开发的同学或许会知道，在 Safari 浏览器中有这样一条 CSS 规则：
-webkit-overflow-scrolling: touch;当其样式值为 touch 时，浏览器会使用具有回弹效果的滚动, 即“当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果”。除此之外，在丰富多姿的 web 前端生态中，很多经典组件的交互都一定程度地沿用了惯性滚动的效果，譬如下面提到的几个流行 H5 组件库中的例子。
流行 UI 库效果为了方便对比，我们先来看看一个 H5 普通长列表在 iOS 系统下（开启了滚动回弹）的滚动表现：
的 picker 组件
明显可见，weui 选择器的惯性滚动效果非常弱，基本上手从屏幕上移开后滚动就很快停止了，体验较为不好。
的 picker 组件
相比之下，vant 选择器的惯性滚动效果则明显清晰得多，但是由于触顶/底回弹时依然维持了普通滚动时的系数或持续时间，导致整体来说回弹的效果有点脱节。
应用物理学模型惯性 一词来源于物理学中的惯性定律（即 牛顿第一定律）：一切物体在没有受到力的作用的时候，运动状态不会发生改变，物体所拥有的这种性质就被称为惯性。可想而知，惯性滚动的本质就是物理学中的惯性现象，因此，我们可以恰当利用中学物理上的 滑块模型 来描述惯性滚动全过程。
为了方便描述，我们把浏览器惯性滚动效果中的滚动目标（如浏览器中的页面元素）模拟成滑块模型中的 滑块。而且分析得出，惯性滚动的全过程可以模拟为（人）使滑块滑动一定距离然后释放的过程，那么，全流程可以拆解为以下两个阶段：
第一阶段，滑动滑块使其从静止开始做加速运动；
在此阶段，滑块受到的 F拉 大于 F摩 使其从左到右匀加速前进。
需要注意的是，对于浏览器的惯性滚动来说，我们一般关注的是用户即将释放手指前的一小阶段，而非滚动的全流程（全流程意义不大），这一瞬间阶段可以简单模拟为滑块均衡受力做 匀加速运动。
第二阶段，释放滑块使其在只受摩擦力的作用下继续滑动，直至最终静止；
在此阶段，滑块只受到反向的摩擦力，会维持从左到右的运动方向减速前进然后停下。