TOC ( Table Of Contents ) 구현

해당 프로젝트는 Vanilla JS에 TypeScript만을 사용한 프로젝트입니다.

TOC란 Table Of Contents로 목차 스크롤을 의미합니다.

구현 순서

1. h*를 순서대로 모두 탐색
2. 각 h*에 id로 innerText를 준다. ( 여기서 text가 긴 경우를 대비해서 css ellipsis 처리 )
3. 각 h*에 해당하는 a를 만들고 href로 innerText를 준다.
4. 모든 a를 nav에 넣는다.
5. 각 h*에 IntersectionObserver를 적용해서 뷰포트에 들어오는 시점과 스크롤 방향을 이용해서 현재 영역의 h*에 activate라는 클래스를 준다.

나머지는 각자 필요한 스타일링을 적용하면 생각보다 쉽게 TOC를 구현할 수 있습니다.