Javascript 在页面上滚动 timeshift 动垂直滚动条

.filler {
  height: 300vh;
}

.top-line {
  width: 7px;
  position: fixed;
  /*updated*/
  bottom: 0;
  z-index: 2000;
  background-color: #f00;
  border-radius: 0;
  animation: bottom-line 1s linear;
  animation-timeline: scroll(y);
  /*added*/
}

@keyframes bottom-line {
  0% {
    height: 0vh;
  }
  100% {
    height: 100vh;
  }
}

<div class="top-line"></div>
<div class="filler"></div>

function getScrollPercent() {
  var h = document.documentElement,
    b = document.body,
    st = 'scrollTop',
    sh = 'scrollHeight';
  return (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
}

function update() {
  document.getElementById("left-line").style.height = getScrollPercent() + "vh";
}

window.addEventListener('scroll', () => {
  update();
});
update();

.filler {
  height: 300vh;
}

.top-line {
  width: 7px;
  height: 0vh;
  position: fixed;
  bottom: 0;
  z-index: 2000;
  background-color: #f00;
  border-radius: 0;
}

<div id="left-line" class="top-line"></div>
<div class="filler"></div>