ScrollSpy_offsetTop, scrollTop, clientHeight

문제

 

offsetTop, scrollTop, clientHeight의 상관관계를 통해 스크롤을 내리면서 나오는 숫자가 상단 메뉴에 활성화된 숫자와 일치하도록 구현

 

문제해결

const navElem = document.querySelector("#nav");
const navItems = Array.from(navElem.children);
const contentsElem = document.querySelector("#contents");
const contentItems = Array.from(contentsElem.children);
const offsetTops = contentItems.map((elem) => {
  const [ofs, clh] = [elem.offsetTop, elem.clientHeight];
  return [ofs - clh / 2, ofs + clh / 2];
  // return [ofs, ofs + clh]
});
window.addEventListener("scroll", (e) => {
  const { scrollTop } = e.target.scrollingElement;
  const targetIndex = offsetTops.findIndex(([from, to]) => (
    scrollTop >= from && scrollTop < to
  ))
  navItems.forEach((item, index) => {
    if(index !== targetIndex) {
      item.classList.remove('on');
    } 
    else item.classList.add('on');
  })
});

 

Issue

  1. 반복되는 요소 노드를 취득할 때, 부모 요소 노드.children을 통해 모든 자식 노드를 가져오고 이를 Array.from() 메서드를 통해 

      배열 집합에 적재하였다.

      이후 코드 상에서 map(), forEach() 배열 메서드를 활용하여 동적 처리를 유동적으로 처리할 수 있었다.

 

   2. 페이지와 페이지 사이 간에 범위 동안 상단 메뉴의 숫자를 활성화시켜 주기 위해 offsetTop과 clientHeight의 상관 관계를 이용

       하여 그 범위의 값을 추려 냈다. 

 

• offsetTop: 상대적으로 가장 가까운 위치에 있는 상위 요소의 맨 위에서부터의 픽셀 수
• clientHeight: 내부 여백(padding)을 포함 한 엘리먼트의 내부 높이를 픽셀로 반환

    3. 현재 스크롤 바의 위치를 가져오기 위해 element.scrollingElement의 프로퍼티 scrollTop을 디스트럭쳐링 

 

    4. 현재 스크롤 바의 위치와 해당 동적 효과가 적용 될 범위를 비교 및 인덱스를 식별해주기 위해 Array.findIndex() 메서드를 사용

        하여 시작과 끝의 범위 값 내에 스크롤 바의 현재 위치가 존재한다면 해당 페이지의 인덱스를 반환