parallaxEffect02

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect02.html

document.querySelectorAll("#parallax__dot a").forEach(el => {		//아이디 parallax__dot의 a태그들을 선택해 element값을 el에 저장
	el.addEventListener("click", e => {		//el을 클릭했을 때 이벤트 설정
    	e.preventDefault();		//클릭했을 때 이벤트 초기화(a태그 초기화)
        	document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"});	//el의 href값으로 부드럽게 이동
        });
    });

window.addEventListener("scroll", () => {		//브라우저에 스크롤 했을 때 이벤트 설정
	let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop;		
    //변수 scrollTop에 브라우저의 pageYOffset값 또는 html의 scrollTop값 또는 브라우저의 scrollY값 저장

	document.querySelector(".scrollTop span").innerHTML = Math.round(scrollTop);	//클래스 scrollTop의 span태그에 Math.round(scrollTop)값 출력

	document.querySelectorAll(".content__item").forEach((el,i) => {			//클래스 content__item들을 선택해 element값을 el에 index값을 i에 저장
    	if(scrollTop >= document.getElementById("section"+(i+1)).offsetTop){		//scrollTop값이 section(i+1)의 offsetTop값보다 크거나 같을 때
        	document.querySelectorAll("#parallax__dot li").forEach(li => {		//아이디 parallax__dot의 li태그들을 선택해 element 값을 li에 저장
            	li.classList.remove("active");		//li에 클래스 active 삭제
            });
            document.querySelector(`#parallax__dot li:nth-child(${i+1})`).classList.add("active");		//아이디 parallax__dot의 (i+1)번째 li 태그에 클래스 active 추가
        };
    });
});