CODEWITHSUNDEEP
javascripthtmlcssscrollprogress
Rebecca
Rebecca

Reputation: 45

How can I get progress bar to update as I scroll down my website page?

I am following this tutorial: https://www.w3schools.com/howto/howto_js_scroll_indicator.asp, but I unable to get the javascript to work as I scroll down my page. The progress is not being shown as I move down and up my page. I have the grey progress container showing up but am unable to load the green part.

I am wondering if it has to do something within my existing code that could be messing it up? Any advice would be greatly appreciated.

Upvotes: 1

Views: 687

Answers (1)

Ashvin777
Ashvin777

Reputation: 1482

You should better use document.body instead of document.documentElement. 

// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

function myFunction() {    
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.body.scrollHeight - document.body.clientHeight;
  var scrolled = (winScroll / height) * 100;

  document.getElementById("myBar").style.width = scrolled + "%";
}

Check out live in action - https://jsitor.com/pPcHN0v8a

Upvotes: 1

Related Questions