Scroll progress bar

by fxi

HTML

<div id=scrollContainer>
  <div id=scroll></div>
</div>

<div id=barContainer>
  <div id=bar></div>
</div>

CSS

body,
html,
#scrollContainer {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#scrollContainer {
  overflow: scroll;
}

#scroll {
  height: 300%;
}

#barContainer {
  position: absolute;
  top: 0px;
  height: 10px;
  width: 100%;
  background: black;
}

#bar {
  width: 0;
  height: 100%;
  background-color: red;
  float: left;
}

JavaScript

var elScrollContainer = document.getElementById("scrollContainer");
var elScroll = document.getElementById("scroll");
var elBar = document.getElementById("bar");
var diff, pos, newPos, currentPos;
var stop = false;

var rectContainer = elScrollContainer.getBoundingClientRect();
var rectScroll = elScroll.getBoundingClientRect();

function getPercent() {
  diff = rectScroll.height - rectContainer.height;
  if (diff < 0) return 1;
  currentPos = elScrollContainer.scrollTop;
  return Math.ceil(currentPos / diff * 100);
}

function updateBar(percent) {
  elBar.style.width = percent + "%";
}


function loop() {
  newPos = getPercent();
  if (newPos != pos) {
    updateBar(newPos);
    pos = newPos;
  }
  if (!stop)
    window.requestAnimationFrame(loop);
}

loop();