Slim Scroll Position Indicator with Pure JavaScript – Scrollify

Category: Javascript | September 9, 2015
Author: Htown29
Views Total: 3,364
Official Page: Go to website
Last Update: September 9, 2015
License: MIT

Preview:

Slim Scroll Position Indicator with Pure JavaScript – Scrollify

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;
}

 

You Might Be Interested In:


Leave a Reply