ブロックにスクロールした後でアニメーションを実行する

Question

私はwindow.onloadの後に動作する関数を持っていますが、必要なときにスクロールした直後にそれを実行する方法があります。私はjQueryの使用が簡単だと理解していますが、ネイティブJSで行う必要があります。あなたのすべての李のために

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

これを試してみると、ul要素の近くまでスクロールするとアニメーションが再びトリガーされます。 #percentageは、あなたのhtmlのul要素に与えたidです。

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

、あなたのアニメーションを実行するためにgetBoundingClientRectを使用することができます。

アニメーションが完了したらフラグを設定することを忘れないでください。そうしないと、すべてのスクロールで実行されます。