❏ Js - 스크롤 스파이 (scroll spy) 만들기!

 

안녕하세요!

 

오늘은 자바스크립트를 활용하여 웹페이지에 적용할 수 있는 스크롤 스파이를 만들어보겠습니다!

---

스크롤 스파이란(scroll spy)?

 

스크롤 위치에 기반하여 자동으로 네비게이션 대상을 갱신하는 가로형 UI입니다.

 

먼저 html 파일을 준비합니다.

 

✎ html

<div class="menu">
    <nav>
        <ul class="menu_list">
            <li><a>이 달의 에디박스</a></li>
            <li><a>8만 반려견들의 후기</a></li>
            <li><a>구성소개</a></li>
            <li><a>QnA</a></li>
            <li><a>테마소개</a></li>
        </ul>
    </nav>
</div>

 

✎css

  간단하게 css도 입혀줍니다.

header .menu{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

header .menu .menu_list{
    display: flex;
    flex-direction: row;
    gap: 40px;
    font-size: 1.1rem;
}

 

그럼 아래처럼 만들어집니다.

 

✎ js

const animationMove = function(selector){
const targetEl = document.querySelector(selector);
const browserScrollY = window.pageYOffset;
const targerScrollY = targetEl.getBoundingClientRect().top + browserScrollY;

console.log(`el sy : ${targetEl.getBoundingClientRect().top}`)

window.scrollTo({ top: targerScrollY, behavior: 'smooth'});
};

const scrollMoveEl = document.querySelectorAll("[data-animation-scroll='true']");
for(let i = 0; i <scrollMoveEl.length; i++){
    scrollMoveEl[i].addEventListener('click', function(e){
        const taget = this.dataset.taget;
        animationMove(taget);
    });
}

 

그러나 이렇게 코드만 작성해서 끝나는게 아니랍니다.

 

우리가 만든 menu에 data-taget의 값으로 움직일 위치와 data-animation-scroll의 값을 입력해줘야합니다.

 

메뉴를 선택 시 스크롤이 움직이고(true) 위치(data-taget)를 지정해야합니다.

<ul class="menu_list">
    <li data-animation-scroll="true" data-taget=".container1"><a>이 달의 에디박스</a></li>
    <li data-animation-scroll="true" data-taget=".container2"><a>8만 반려견들의 후기</a></li>
    <li data-animation-scroll="true" data-taget=".container3"><a>구성소개</a></li>
    <li data-animation-scroll="true" data-taget=".container4"><a>QnA</a></li>
    <li data-animation-scroll="true" data-taget=".container5"><a>테마소개</a></li>
</ul>

 

그러면 이제 구현이 되는 화면을 살펴볼까요??

 

---

오늘도 읽어주셔서 감사합니다

좋은 하루보내세요!