Slim Scroll Position Indicator with Pure JavaScript – Scrollify

Category: Javascript | September 9, 2015
Views Total:1,325 views
Official Page:Go to website
Last Update:September 9, 2015


Slim Scroll Position Indicator with Pure JavaScript – Scrollify


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.
(function() {
  function Scrollify() {
    var line = document.querySelector(".scroll-line"),
        scrollpos = window.pageYOffset, 
        docheight = document.body.clientHeight, 
        winheight = window.outerHeight,
        scrolled  = ( scrollpos/( docheight-winheight) )*100;
   = (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