Parallax Effect02 - 사이드 메뉴

document.querySelectorAll("#parallax__dot a").forEach(el => {
    el.addEventListener("click", e => {
        e.preventDefault();

        // window.scroll(0,1000);
        // window.scroll({left:0, top:1000});
        // window.scroll({left:0, top:1000, behavior:"smooth"});

        // window.scrollTo(0,1000);
        // window.scrollTo({left:0, top:1000});
        // window.scrollTo({left:0, top:1000, behavior:"smooth"});

        // window.scrollBy(0,1000);
        // window.scrollBy({left:0, top:1000});
        // window.scrollBy({left:0, top:1000, behavior:"smooth"});

        document.querySelector(el.getAttribute("href")).scrollIntoView({behavior:"smooth"})
    })
})

window.addEventListener("scroll", () => {
    let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;

    document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

    // for(let i=1; i<=9; i++){
    //     if(scrollTop >= document.getElementById("section"+i).offsetTop -2){
    //         document.querySelectorAll("#parallax__dot li").forEach(li => {
    //             li.classList.remove("active");
    //         })
    //         // document.querySelector("#parallax__dot li:nth-child("+i+")").classList.add("active")
    //     }
    // }

    document.querySelectorAll(".content__item").forEach((e, i) => {
        if(scrollTop >= e.offsetTop-2){
            document.querySelectorAll("#parallax__dot li").forEach(li => {
                li.classList.remove("active");
            })
            document.querySelector("#parallax__dot li:nth-child("+(i+1)+")").classList.add("active");
        }
    })
})

// // 스크롤 값 구하기
// window.screenY
// window.pageYOffset
// document.documentElement.scrollTop

// window.screenX //ie X
// window.pageXOffset
// document.documentElement.scrollLeft

// // 스크롤 값으로 이동하기
// window.scroll() //브루우저 위치
// window.scrollTo() //절대적(기준점) 위치
// window.scrollBy() //상대적 위치

// element.scroll()
// element.scrollTo()
// element.scrollBy()
// element.scrollIntoView()

• Document.querySelectorAll()
• EventTarget.addEventListener()
• Event.preventDefault()()
• Element.getAttribute()
• element.scrollIntoView
• Window.pageYOffset
• Element.scrollTop
• Window.scrollY
• HTMLElement.offsetTop