只用 JavaScript 怎么实现平滑的 scroll snap？

排除 CSS 的 scroll-snap，在 Safari 下会奇怪地带动 body 或其他先祖元素滚动，且浏览器兼容也不好。

如果有强迫症的话，定时一段时间检测滚动停止后，再滚动到最近的位置不是很丝滑。假设内容为一堆 24px 高的列表项目：

对于触控，在 scrollend 时计算出最后一小段时间的加速度，然后平滑滚动到对应的位置就可以。

对于鼠标，因为不知道滚动什么时候停止，以及触控板和鼠标的滚动方式也千奇百怪，想到一个基本上不可行的方法：每次触发 wheel 事件后，根据最后一小段时间的 deltaY 和时间的关系插值，推测出滚动结束的时间和终点位置，记 positionOffset 为预期终点位置和最近元素坐标间的距离，time 为允许的缓冲时间，以 1px 为最小分度，每隔 Math.abs(positionOffset) / time 让 scrollTop++ 或 --。数值发生变化时（什么数值？）取消之前的计时并重新计时。显然这很麻烦而且根本没有头绪。

有可以支的招吗？

w3cfed

2020-09-06 02:00:38 +08:00

```javascript
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
}

scrollToTop()

```

// 事例
`window.requestAnimationFrame()`

告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

`requestAnimationFrame`

优势：由系统决定回调函数的执行时机。60Hz 的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。

来之整理博客内容 [How to scroll to the top of the page smoothly? ]( https://github.com/martinageradams/blog/issues/11)