[JavaScript] 웹페이지 scroll이벤트

 

 

 

-상단에 네비를 클릭하면 매칭되는 컨텐츠 페이지 이동

-스크롤시 컨텐츠와 매칭되는 네비에 이벤트

 

***html

<div class="scroll">
  <nav>
    <a href="#" class="on">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
  </nav>
  <div class="page-wrap">
    <div class="page">1</div>
    <div class="page">2</div>
    <div class="page">3</div>
    <div class="page">4</div>
  </div>
</div>

 

const $link = [...document.querySelectorAll('a')];
const $scroll = document.querySelector('.scroll-container');
const $page = [...$scroll.querySelectorAll('.scroll-page')];

$link.forEach((_,i) => {
    _.addEventListener('click', (e) => { 
    //$link(상단의 숫자)를 클릭시 이벤트 실행
        e.preventDefault;        //a태그 이벤트 막기
        
        $link.forEach((el) => {  //$link들 초기화
        	el.classList.remove("on");
        });
        e.currentTarget.classList.add("on");  
        //클릭 당한 $link만 이벤트 실행

        $page.forEach((el,id) => {          
            if (i === id) {                   
            //이벤트 실행중인 $link와 순서가 매칭되는 $page
            	el.scrollIntoView({behavior:'smooth'}).classList.add("on"); 
            } else {
            	el.classList.remove("on");
            };
        });   
    });
});


$scroll.addEventListener('scroll',() => {    
//스크롤 이벤트 실행
    $page.forEach((e, i) => {
        const $scrollHeight = window.scrollY + window.innerHeight;      
        //윈도우 전체 높이 + border를 제외한 스크린(화면)높이 
        //= 이벤트 전체 영역
        const $showPage = e.offsetHeight/2 + e.getBoundingClientRect().top ;  
        //스크린바와 border를 포함한 스크린(화면)높이/2 + 현재 웹페이지의 top 위치 

        if ($scrollHeight > $showPage) {
        //전 웹페이지의 1/2영역을 지나면 현재 웹페이지에 클래스 추가
        	e.classList.add("on");         //정방향 스크롤 
        } else {
       		e.classList.remove("on");      //역방향 스크롤
        };

        if (window.scrollY > $showPage) { 
        //전 웹페이지의 1/2영역을 지나면 전 웹페이지에 클래스 삭제
        	e.classList.remove("on");
        };

        if (e.classList.contains('on')) {  
        //현재 웹페이지에 클래스가 존재한다면
            $link.forEach((el, id) => {         
                if (i === id) {                
                //이벤트 실행중인 $link와 순서가 매칭되는 $page
                	el.classList.add("on");
                } else {
                	el.classList.remove("on");
                };
            });
        };
    });
});

 

See the Pen scroll-* by gaae (@gaae) on CodePen.

 

 

 

[CSS] scroll-*속성 사용

https://x-x-search.tistory.com/entry/CSS-scroll