[JS / Portfolio] 스크롤 시 섹션 이동

fullpage.js 기능 / 위 아래로 스크롤 시 한 섹션식 이동 하는 기능

JS

window.onload = function(){
    const elm = document.querySelectorAll('.section');
    const elmCount = elm.length;
    elm.forEach(function(item, index){
      item.addEventListener('mousewheel', function(event){
        event.preventDefault();
        let delta = 0;
  
        if (!event) event = window.event;
        if (event.wheelDelta) {
            delta = event.wheelDelta / 120;
            if (window.opera) delta = -delta;
        } 
        else if (event.detail)
            delta = -event.detail / 3;
  
        let moveTop = window.scrollY;
        let elmSelector = elm[index];
  
        // wheel down : move to next section
        if (delta < 0){
          if (elmSelector !== elmCount-1){
            try{
              moveTop = window.pageYOffset + elmSelector.nextElementSibling.getBoundingClientRect().top;
            }catch(e){}
          }
        }
        // wheel up : move to previous section
        else{
          if (elmSelector !== 0){
            try{
              moveTop = window.pageYOffset + elmSelector.previousElementSibling.getBoundingClientRect().top;
            }catch(e){}
          }
        }
  
        const body = document.querySelector('html');
        window.scrollTo({top:moveTop, left:0, behavior:'smooth'});
      });
    });
  }

마우스 휠 이동을 감지해

유저의 모니터 화면 높이 와 n번째 섹션의 탑 높이를 계산해서 이동을 시키는 js 코드이다.

Portfolio 프로젝트와 관련된 포스트들

포트폴리오 웹 제작 회고 >

JS에서 이메일 보내기 >

cdn끼리 충돌 날 때 해결법 >

스크롤 시 한 섹션씩 이동 >

JS으로 Include 사용하기! >

자동 무한 이미지 슬라이드 구현 >