Você pode verificar se o scroll
foi até o elemento desejado. Os créditos da função isScrolledIntoView
vem dessa resposta.
var wasExecuted = false;
function move() {
var elem = document.getElementById("myBar");
var porcentagem = document.querySelector("span");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
porcentagem.textContent = width + '%';
elem.style.width = width + '%';
}
}
}
window.onscroll = isScrolledIntoView;
function isScrolledIntoView() {
var elemTop = document.getElementById('myBar').getBoundingClientRect().top;
var elemBottom = document.getElementById('myBar').getBoundingClientRect().bottom;
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
if (isVisible && !wasExecuted) {
move();
wasExecuted = true;
}
}
#myBar {
margin-top: 500px;
}
<div class="w3-container">
<h2>Dynamic Progress Bar</h2>
<div class="w3-light-grey">
<div id="myBar" class="w3-green" style="height:24px;width:0"><span></span></div>
</div>
<br>
<button class="w3-button w3-green" onclick="move()">Click Me</button>
</div>