如何在平滑滚动条中使用滚动动画

/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

// 监听滚动事件
window.addEventListener('scroll', function() {
  // 获取当前滚动位置
  var currentPosition = window.pageYOffset || document.documentElement.scrollTop;

  // 设置目标滚动位置
  var targetPosition = 500; // 假设目标位置为500px

  // 计算滚动距离
  var distance = targetPosition - currentPosition;

  // 定义动画函数
  function animateScroll() {
    // 计算下一帧的滚动位置
    currentPosition += distance * 0.1; // 每次滚动10%的距离

    // 判断是否到达目标位置
    if (Math.abs(currentPosition - targetPosition) < 1) {
      // 到达目标位置，停止动画
      window.scrollTo(0, targetPosition);
      return;
    }

    // 滚动到下一帧的位置
    window.scrollTo(0, currentPosition);

    // 继续下一帧动画
    requestAnimationFrame(animateScroll);
  }

  // 开始动画
  animateScroll();
});