TOC를 만들면서 특정 요소로 스크롤하는 기능을 추가했습니다. 저는 ie를 지원하지 않기 때문에 window.scrollTo를 사용해서 값을 구해서하는 방식이 아니라 조금 깔끔하게 구현하기 위해서 Element.scrollIntoView()를 사용했습니다.
문제는 이전처럼 값으로 window.scollTo로 이동한다면 여백을 스크립트에서 적용해서 이동하는 위치를 조절할 수 있지만 Element.scrollIntoView()에서는 따로 여백에 대한 값을 설정할 수 없었습니다.
여러가지 찾아보다가 간단하게 css의 값으로만 특정요소로 이동할 element에 아래처럼 스타일만 주면 여백이 성공적으로 적용 됩니다.
element {
scroll-margin: 45px;
}Code language: CSS (css)예시
참고