当我向下滚动我的网站页面时，如何让进度条更新？

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