Как я могу обновить индикатор выполнения при прокрутке страницы своего сайта?

Question

Я следую этому уроку: https://www.w3schools.com/howto/howto_js_scroll_indicator.asp,, но я не смог заставить работать JavaScript, когда прокручивал страницу вниз.Прогресс не отображается, когда я двигаюсь вниз и вверх по своей странице.У меня отображается серый контейнер прогресса, но я не могу загрузить зеленую часть.

Мне интересно, должно ли оно что-то делать в моем существующем коде, которое могло бы испортить его?Любой совет будет принята с благодарностью.

Answer 1

Вам лучше использовать document.body вместо 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 + "%";
}

Проверить вживую в действии - https://jsitor.com/pPcHN0v8a