前端也要懂物理 —— 惯性滚动篇
我们在平时编程开发时，除了需要关注技术实现、算法、代码效率等因素之外，更要把所学到的学科知识（如物理学、理论数学等等）灵活应用，毕竟理论和实践相辅相成、密不可分，这无论是对于我们的方案选型、还是技术实践理解都有非常大的帮助。今天就让我们一起来回顾中学物理知识，并灵活运用到惯性滚动的动效实现当中。 惯性滚动 （也叫 滚动回弹 ， momentum-based scrolling ）最早是出现在 iOS 系统中，是指 当用户在终端上滑动页面然后把手指挪开，页面不会马上停下而是继续保持一定时间的滚动效果，并且滚动的速度和持续时间是与滑动手势的强烈程度成正比 。抽象地理解，就像高速行驶的列车制动后依然会往前行驶一段距离才会最终停下。而且在 iOS 系统中，当页面滚动到顶/底部时，还有可能触发 “回弹” 的效果。这里录制了微信 APP 【账单】页面中的 iOS 原生时间选择器的惯性滚动效果： 熟悉 CSS 开发的同学或许会知道，在 Safari 浏览器中有这样一条 CSS 规则： 1 -webkit-overflow-scrolling : touch ; 当其样式值为 touch 时，浏览器会使用具有回弹效果的滚动, 即“当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果”。除此之外，在丰富多姿的 web 前端生态中，很多经典组件的交互都一定程度地沿用了惯性滚动的效果