Parallax Effect 02 - 스크롤링 효과 : 사이드 메뉴

{
       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", ()=>{     //스크롤 탑 값을 3가지 방식으로 아무거나 가져옴
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY

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

            // for(let i= 1; i<=9; i++){
            //     if(scrollTop >= document.getElementById("section"+i).offsetTop -2){//각 섹션에 offsetTop를 더함 (오차 생겨서 -2 붙힘)
            //         document.querySelectorAll("#parallax__dot li").forEach(li =>{   //모든parallax__dot의 li에게
            //             li.classList.remove("active")   //active를 삭제하고
            //         })
            //         document.querySelector("#parallax__dot li:nth-child("+i+")").classList.add("active")    //선택된것만 active 추가
            //     }
            // }
          

            //위 for문을 forEach문으로 변경
            document.querySelectorAll(".content__item").forEach((element, index)=>{
                if(scrollTop >= element.offsetTop -2){
                    document.querySelectorAll("#parallax__dot ul li").forEach(li => {
                        li.classList.remove("active");
                    });
                    document.querySelector("#parallax__dot ul li:nth-child("+(index+1)+")").classList.add("active")
                }
            })
}