[JS] Scroll Event

window.scrollY

px로 스크롤 얼마나 했는지 나타냄

---

offsetTop

요소의 Y축 위치 값(처음위치만) 가져옴

---

getBoundingClientRect() ❤️

요소의 크기와 위치를 갖고 있는 객체

아주 유용한 아이!!

function showValues() {
    outputElm.innerHTML = `
    스크롤 된 양: <strong>${window.scrollY}</strong>
    / offsetTop: <strong>${ilbuniElm.offsetTop}</strong>
    / getBoundingClientRect(): <strong>${ilbuniElm.getBoundingClientRect().top}</strong>
`;

    let posY = ilbuniElm.getBoundingClientRect().top;
    outputElm.innerHTML = posY;

    if (posY < window.innerHeight * 0.2) {
        ilbuniElm.classList.add('zoom');
    } else {
        ilbuniElm.classList.remove('zoom');
    }
}

document.addEventListener('scroll', function () {
    showValues();
});