[vanilla javascript] 스크롤 이벤트

스크롤 하다가 클래스 ani가 있는 부분(영역)에 닿으면 클래스 on을 붙인다. 

function scollHandler () {
        const scroll_y = window.scrollY + (window.innerHeight / 1.5) ;
        const animationContainer = document.querySelectorAll('.ani')
        animationContainer.forEach(element => {
            const itemTop = element.getBoundingClientRect().top + window.scrollY;
            if((scroll_y) > itemTop){
                element.classList.add('on');
            }else{
                element.classList.remove('on');
            }
        });
    }

    scollHandler();

    document.addEventListener("scroll", function(){
        scollHandler();
    })

더 좋은 방법이 생기면 코드 수정하겠음 !!