Slim Scroll Position Indicator with Pure JavaScript – Scrollify

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


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