Slim Scroll Position Indicator with Pure JavaScript – Scrollify

Preview:

Description:

A pure JavaScript solution to draw a slim indicator bar that auto updates based on to the scroll position.

How to use it:

Create an empty DIV element for the scroll position indicator.

<div class="scroll-line"></div>

The core JavaScript.

/**
* Subtract the height of the HTML document from the viewport height.
* Divide the scroll position by the viewport height and the document height.
* Multiply that by 100 to convert it to a percentage value.
*/
  
//alert(window.outerHeight);
//alert(document.body.clientHeight);
(function() {
  function Scrollify() {
    var line = document.querySelector(".scroll-line"),
        scrollpos = window.pageYOffset, 
        docheight = document.body.clientHeight, 
        winheight = window.outerHeight,
        scrolled  = ( scrollpos/( docheight-winheight) )*100;
      
     line.style.width = (scrolled + '%');
  }
  window.addEventListener("scroll", Scrollify);
})();

Style the scroll position indicator.

.scroll-line {
  height: 2px;
  background: red;
  width: 0%;
  clear: both;
}