滚动事件

每当元素滚动时，会触发scroll事件。该事件用处极多，比如知道用户当前查看的元素（禁用用户视线以外的动画，或向邪恶的指挥部发送监视报告），或展示一些滚动的迹象（通过高亮表格的部分内容，或显示页码）。

以下示例在文档上方绘制一个进度条，并在您向下滚动时更新它来填充：

  1. <style>
  2.   #progress {
  3.     border-bottom: 2px solid blue;
  4.     width: 0;
  5.     position: fixed;
  6.     top: 0; left: 0;
  7.   }
  8. </style>
  9. <div id="progress"></div>
  10. <script>
  11.   // Create some content
  12.   document.body.appendChild(document.createTextNode(
  13.     "supercalifragilisticexpialidocious ".repeat(1000)));
  15.   let bar = document.querySelector("#progress");
  16.   window.addEventListener("scroll", () => {
  17.     let max = document.body.scrollHeight - innerHeight;
  18.     bar.style.width = `${(pageYOffset / max) * 100}%`;
  19.   });
  20. </script>

将元素的position属性指定为fixed时，其行为和absolute很像，但可以防止在文档滚动时期跟着文档一起滚动。其效果是让我们的进度条呆在最顶上。 改变其宽度来指示当前进度。 在设置宽度时，我们使用%而不是px作为单位，使元素的大小相对于页面宽度。

innerHeight全局绑定是窗口高度，我们必须要减去滚动条的高度。你点击文档底部的时候是无法继续滚动的。对于窗口高度来说，也存在innerWidth。使用pageYOffset（当前滚动位置）除以最大滚动位置，并乘以 100，就可以得到进度条长度。

调用滚动事件的preventDefault无法阻止滚动。实际上，事件处理器是在进行滚动之后才触发的。