TIL no.2 - Element.scrollIntoView()

id만 알고 querySelector, getElementId 를 이용해서 그 element를 가지고 오면

그 element 자체에 있는 scrollIntoView를 이용해서 스크롤이 가능하게 해준다.

즉, 엘리먼트 자체에 있는 인터페이스로 엘리먼트의 parent 컨테이너에 스크롤이 된다.

 

 

 

이 기능을 사이트에서 navbar를 만들 때 각각의 section으로 스크롤이 되는 기능을 추가하기 위해 사용할 수 있습니다.

 

<div class="navbar__menu">
   <ul class="navbar__menu">
     <li class="navbar__menu__item" data-link="#home">Home</li>
     <li class="navbar__menu__item" data-link="#about">About</li>
     <li class="navbar__menu__item" data-link="#skills">Skills</li>
     <li class="navbar__menu__item" data-link="#contact">Contact</li>
   </ul>
 </div>

이 엘리먼트를 id로 가져와 스크롤하여 각각의 위치로 가게 하기 위해

 

  <script>
    const navbarMenu = document.querySelector('.navbar__menu');
    navbarMenu.addEventListener('click', (event) => {
      console.log(event.target.dataset.link);
      const target = event.target;
      const link = target.dataset.link;
      if(link == null) {
        return;
      } 
      console.log(event.target.dataset.link);
      const scrollTo = document.querySelector(link);
      scrollTo.scrollIntoView();
    })
  </script>

이와 같이 script 부분을 작성할 수 있습니다.

 

 

 

HTMLElement.dataset 속성도 사용되었는데 이것은 읽기 전용 속성으로 사용자 지정으로 (data-*)을 작성하고

이 내용을 HTML과 DOM에 제공합니다. 

각 target의 dataset.* (위 내용에서는 *은 link) 을 작성하면 그 안에 작성한 내용을 읽어 낼 수 있는 것입니다.

<div id="user" data-id="choihaneul9545" data-user="haneul">

위의 데이터를 불러오기 위해

 

const el = document.querySelector('#user');

el.id === 'user'
el.dataset.id === 'choihaneul9545'
el.dataset.user === 'haneul'

위와 같이 속성을 가져와 내용을 읽어낼 수 있습니다.