滚动进度条

创建一个表示页面滚动百分比的进度条。

• 使用 position: fixed 和较大的 z-index 值将元素置于页面顶部并位于任何内容之上。
• 使用 EventTarget.addEventListener() 和 Element.scrollTop 来确定文档的滚动百分比，并将其应用于元素的 width 属性。

<div id="scroll-progress"></div>

body {
  min-height: 200vh;
}

#scroll-progress {
  position: fixed;
  top: 0;
  width: 0%;
  height: 4px;
  background: #7983ff;
  z-index: 10000;
}

const scrollProgress = document.getElementById('scroll-progress');
const height =
  document.documentElement.scrollHeight - document.documentElement.clientHeight;

window.addEventListener('scroll', () => {
  const scrollTop =
    document.body.scrollTop || document.documentElement.scrollTop;
  scrollProgress.style.width = `${(scrollTop / height) * 100}%`;
});