<div id="progressBar"></div>
<div id="progressBarContainer"></div>
<div style='height:200vh'></div>

html {
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
}

body {
  background: #171414;
  font-family: "Courier New", Courier, monospace;
  color: #ffffff;
  padding: 15% 15% 5%;
}


::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

#progressBarContainer {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
}


#progressBar {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  background: linear-gradient(to top, violet, red);
  height: 0;
  opacity: 0;
}

const progressBar = document.querySelector("#progressBar");
// 内容的高度-视口的高度=能滚动的总高度
let totalPageHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = () => {
  // 滚动的多少高度/能滚动的总高度
  let newProgressHeight = (window.pageYOffset / totalPageHeight) * 100;
  progressBar.style.height = `${newProgressHeight}%`;
  progressBar.style.opacity = `${newProgressHeight}%`;
};