每个部分的滚动指示器

Question

好，所以我想制作一个滚动指示器，该指示器在每个部分应从0到100开始。每个部分的高度均为100vh。由于现在可以正常使用，当您在所有部分中从上到下滚动时，它将从0变为100。可以说我们有4个部分，即100vh的高度，所以基本上，计数器应该从0到400。

它现在的工作方式是

window.onscroll = function () { myFunction() };

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";

  console.log(winScroll);
}

滚动的变量在经过这四个部分时当然只会从0到100。 有人要挑战吗？

以屏幕截图为例。然后顶部的指示器应在下一部分再次从0开始

我试图说滚动* count_of_sections，但是在完成该部分之前它获得了100％的方式

说出解决方案

document.getElementById("myBar").style.width = `calc(${scrolled * 3}% + 8px)`;

如果有人好奇的话，只有3倍导致您无法滚动最后一部分，而+ 8px则导致进度条的高度