Ausführen der Animation nach dem Scrollen zu dem Block

Question

Ich habe eine Funktion, die nach window.onload funktioniert, aber wie Sie es ausführen, nur nach dem gescrollten zu den benötigten. Ich verstehe, dass die Verwendung von jQuery einfacher ist, aber ich muss in native JS tun.

window.onload = function move() { 
    var width = 1; 
    var elem = document.getElementsByClassName("myBar"); 
    var maxValue = document.getElementsByClassName('max-value'); 

     for(var i = 0; i < elem.length; i++) { 
     var params = { 
     elem: elem[i], 
     maxElem: maxValue[i], 
     width: width, 
     interval: null 
     }; 
     params.interval = setInterval(frame, 20, params); 
    } 

    function frame(aParams) { 
    if (aParams.width >= aParams.maxElem.dataset.max) { 
     clearInterval(aParams.interval); 
    } else { 
     aParams.width++; 
     aParams.elem.style.backgroundColor = 'blue'; 
     aParams.elem.style.width = aParams.width + '%'; 
     aParams.maxElem.innerHTML = aParams.width + '%'; 
    } 
    }; 

}; 

https://codepen.io/Slava91/pen/PjpGGr

Answer 1

Versuchen Sie dies, es wird die Animation erneut auslösen, wenn Sie in der Nähe des ul-Elements scrollen. #percentage ist die ID, die ich dem ul-Element in Ihrem HTML gegeben habe.

window.onload = move(); 

    function move() { 
    var width = 1; 
    var elem = document.getElementsByClassName("myBar"); 
    var maxValue = document.getElementsByClassName('max-value'); 

     for(var i = 0; i < elem.length; i++) { 
     var params = { 
     elem: elem[i], 
     maxElem: maxValue[i], 
     width: width, 
     interval: null 
     }; 
     params.interval = setInterval(frame, 20, params); 
    } 

    function frame(aParams) { 
    if (aParams.width >= aParams.maxElem.dataset.max) { 
     clearInterval(aParams.interval); 
    } else { 
     aParams.width++; 
     aParams.elem.style.backgroundColor = 'blue'; 
     aParams.elem.style.width = aParams.width + '%'; 
     aParams.maxElem.innerHTML = aParams.width + '%'; 
    } 
    }; 

} 
isScrolled = false; 
window.onscroll = function loadItBack(){ 
    var rec = document.getElementById("percentage").getBoundingClientRect(); 
    if(window.scrollY > 600 && !isScrolled){ 
    isScrolled = true; 
    move(); 
    }else if(window.scrollY < 600){ 
    isScrolled = false; 
    } 
}; 

Answer 2

Für alle Ihre li, können Sie getBoundingClientRect benutzen, um Ihre Animation auszuführen.

Vergessen Sie nicht, ein Flag zu setzen, sobald die Animation abgeschlossen ist, sonst wird es bei jeder Scroll ausgeführt.