javascript - 内联进度条动画，更改触发器以从加载滚动？

Question

我最近遇到了 this article关于动画进度条内联。我想使用这个确切的代码，但希望它在有人向下滚动时看到它时被触发。目前，该代码在加载时被触发。

我基本上是想找出最简单的方法来实现这些人在“工作原理”部分所做的事情:https://join.com/ .

有什么帮助吗？

Answer 1

您可以使用 scroll 来实现此目的事件，这将触发 scrollTrigger() 并且你应该得到 scroll Top然后计算高度和进程最后设置css样式和滚动时的文本，我认为很清楚:)

window.onscroll = function() { scrollTrigger() };

function scrollTrigger() {
	var scrollTop = document.documentElement.scrollTop;
	var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
	var progess = (scrollTop / height) * 100;
	document.getElementById( 'progressbar' ).style.width = progess + "%";
	document.getElementById( 'progressbar' ).innerHTML = "Upload is " + Math.round( progess ) + "% complete"
}

body { background: black; padding: 100px; margin: 0;height: 900px; }

.progress-bar{
	width: 100vw;
	height: 40px;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #fff
}

.progress-bar > div { 
  color: white; 
  background: red;
  overflow: hidden;
  white-space: nowrap; 
  padding: 10px 0px;
  border-radius: 10px;
  width: 0%;
  text-align: center;
}

<div class="progress-bar">
    <div id="progressbar">0%</div>
  </div>