공부하기

마우스 휠이벤트로 섹션 이동하기

날아라못난 2024. 2. 17. 08:50
728x90
반응형

마우스 휠이벤트로 섹션 이동으로 스크롤링 페이지 만들어봐요

pixabay

 

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="index.js"></script>
    <style>
        section{
            height:100vh;
        }
    </style>
  </head>
  <body>
    <section style="background-color: aqua; height: 100vh">1</section>
    <section style="background-color: aquamarine; height: 100vh">2</section>
    <section style="background-color: bisque; height: 100vh">3</section>
    <section style="background-color: burlywood; height: 100vh">4</section>
    <section style="background-color: coral; height: 100vh">5</section>
    <section style="background-color: bisque; height: 100vh">6</section>
    <section style="background-color: burlywood; height: 100vh">7</section>
    <section style="background-color: coral; height: 100vh">8</section>
  </body>
  </hrml>
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 && elmSelector.id !== "home") {
          try {
            moveTop =
              window.pageYOffset +
              elmSelector.previousElementSibling.getBoundingClientRect().top;
          } catch (e) {}
        }
      }

      const body = document.querySelector("html");
      window.scrollTo({ top: moveTop, left: 0, behavior: "smooth" });
    });
  });
};

 

다른 버전

const wrap = document.getElementsByClassName('wrap')[0]; // 보일 영역
const container = document.getElementsByClassName('container');
let page = 0; // 영역 포지션 초기값
const lastPage = container.length - 1; // 마지막 페이지

window.addEventListener('wheel',(e)=>{
    e.preventDefault();
    console.log(e.deltaY )
    if(e.deltaY > 0){
        page++;
    }else if(e.deltaY < 0){
        page--;
    }  
    if(page < 0){
       return page=0;
    }else if(page > lastPage){
        return page = lastPage;
    }
    console.log(e.deltaY)
    wrap.style.top = page * -100 + 'vh';
},{passive:false}); // 디폴트 기능 제거 - 스크롤

 

보너스 토클 드롭다운 메뉴 만들기

 <div class="appdown">
  <button type="button" class="main-down-link">
   토클버튼
  </button>
  <div class="toggle__wrap">
    <ul>
        <li>
            <a href="#" target="_blank">
            메뉴1
            </a>
        </li>
        <li class="hr-item">
            <hr class="divider_hr"/>
        </li>
        <li>
            <a href="#" target="_blank">
           메뉴2
            </a>
        </li>
    </ul></div>
  </div>
 const toggles = document.querySelector('.main-down-link');
        const togglestarget = document.querySelector('.toggle__wrap');
        toggles.addEventListener('click',(e)=>{
            if(togglestarget.classList.contains('-active')){
                togglestarget.classList.remove('-active')
            }else{
                togglestarget.classList.add('-active')
            }
        })

 

2024.02.25 - [공부하기] - 모바일 버전 섹션이동

 

모바일 버전 섹션이동

2024.02.17 - [공부하기] - 마우스 휠이벤트로 섹션 이동하기 마우스 휠이벤트로 섹션 이동하기 마우스 휠이벤트로 섹션 이동으로 스크롤링 페이지 만들어봐요 html 1 2 3 4 5 6 7 8 window.onload = function ()

nani-mei.tistory.com

 

728x90
반응형