How to fill svg when scrolling

Question

I have svg line:

<svg class="filling" width="500" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path data-over-line="" d="M90,5 L500,5" stroke="#e2e2e2" fill="transparent" stroke-width="4" style="stroke-dashoffset: 0px;"></path>
</svg>

I need when scroll the page it is gradually filled with a different color. How to do it?

Answer 1

I am not sure what shape you ultimately want for your scrollbar, but here is a simple solution. We draw a blue line on top of your grey line to indicate scroll progress. The length of the line is determined by calculating how far done the page we have scrolled.

If you ultimately want to have the scrollbar be a shape other than a line or a rectangle, you will need to take a different approach.

SVG (modified a little):

<svg class="filling" width="500" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="90" y1="5" x2="500" y2="5" stroke="#e2e2e2" fill="transparent" stroke-width="4" />
    <line x1="90" y1="5" x2="90" y2="5" stroke="blue" fill="transparent" stroke-width="4" id="scrollprogress" />
</svg>

JS:

window.onscroll = function (event) {
   var  offset = window.pageYOffset;
   var  wheight = window.innerHeight;
   var  html = document.documentElement;
   var  docheight = Math.max(document.body.scrollHeight, document.body.offsetHeight, 
                             html.clientHeight, html.scrollHeight, html.offsetHeight);
   var  progress = offset / (docheight - wheight);

   // Give the line a CSS gradient based on scroll position
   document.getElementById("scrollprogress").setAttribute("x2", 90 + progress * 410);
}

Demo fiddle