平滑滚动的实现（下）-smooth-scroll 源码分析

上篇讲述了平滑滚动的几种实现方式，并且重点分析 raf，使用 raf 实现了平滑滚动。

接下来，我们来分析 smooth-scroll 这个库，看看别人家的实现。

loopAnimateScroll

其中，loopAnimateScroll 利用 raf 递归调用自己。callback 中有一个 timestamp 参数，这个参数是由 requestAnimationFrame 提供的，它表示上一次调用 requestAnimationFrame 到现在的时间戳（单位为毫秒）。

function loopAnimateScroll(callback, duration) {
  let start = performance.now();
  let currentProgress = 0;

  function animateScroll() {
    currentProgress = (performance.now() - start) / duration;
    currentProgress = Math.min(currentProgress, 1);

    callback(currentProgress);

    if (currentProgress < 1) {
      requestAnimationFrame(animateScroll);
    }
  }

  animateScroll();
}

这个函数接受两个参数，一个是 callback，另一个是 duration。callback 是一个函数，它接受一个参数，表示当前的滚动进度。duration 是一个数字，表示滚动动画的持续时间（单位为毫秒）。

函数首先将 start 变量设置为 performance.now() 的值，它表示当前时间的时间戳。然后将 currentProgress 变量设置为 0，表示滚动进度。

animateScroll 函数是一个内部函数，它用于执行滚动动画。它首先计算出 currentProgress 的值，它是从 start 到现在的时间除以 duration 的值。然后将 currentProgress 的值限制在 0 到 1 之间。

接下来，它将 currentProgress 的值作为参数调用 callback 函数。

最后，如果 currentProgress 的值小于 1，则它将 requestAnimationFrame(animateScroll) 调用自身。这将导致 animateScroll 函数在下一帧重新执行。

总结

smooth-scroll 库提供了很多有用的功能，包括平滑滚动、滚动条锁定和页面滚动事件。

loopAnimateScroll 函数是一个非常有用的工具，它可以用于创建自定义的滚动动画。它易于使用，并且可以与任何 JavaScript 库一起使用。

总之，smooth-scroll 库是一个非常有价值的工具，它可以用于创建美观、响应式和可访问的 Web 应用程序。