向下滚动网站页面时，如何获取进度栏进行更新？

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