如何减慢滚动触发的Div宽度变化动画的速度？

核心修改点就是调整代码里的除数，直接看下面的说明和示例：

• 原脚本中控制速度的关键是这一行：var scrollSlow = (scrollVal / 3)
  除数越大，Div宽度随滚动变化的速度越慢。比如把3改成8或10，宽度增长会明显平缓很多。

原理很简单：scrollVal是当前页面滚动的距离，除以更大的数后，计算出的宽度增量会变小，自然就减慢了动画速度。

下面是修改后的示例代码（这里把除数改成了8，你可以自己调整数值试效果）：

var aDiv = document.getElementById("navi");
function changeWidth() {
  var scrollVal = window.pageYOffset;
  // 修改这里的除数来调整速度，数值越大越慢
  var scrollSlow  = (scrollVal / 8);
  // 这段是限制宽度在20%-100%之间，不需要改动
  aDiv.style.width = Math.min(Math.max(scrollSlow, 20), 100) + "%";
}
window.addEventListener('scroll', function() {
  requestAnimationFrame(changeWidth);
}, false);

你可以多试几个除数数值，比如5、8、12，直到找到你觉得合适的动画速度。

内容的提问来源于stack exchange，提问作者Siberian