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",()=>{
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop  ||  window.scrollY; 
            document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);

            // for(let i=1; 1<=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((element, index) => {
                    if(scrollTop >= element.offsetTop -2){
                        document.querySelectorAll("#parallax__dot li").forEach(li => {
                            li.classList.remove("active");
                        })
                        document.querySelector("#parallax__dot li:nth-child("+(index+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()

패럴랙스02 사이트