적절하지 않은 스크롤 이동되는 에러 해결하기

 

TOC 나 앵커를 작업하다가 스크롤이 해당 위치로 정확하게 가지 않는 에러가 있었습니다. 

 

See the Pen css scroll by HelloHailie (@hellohailie) on CodePen.

 

 

 

 

이 에러의 원인은 네비게이션바였습니다. 

네비게이션바에 상단에 항상 fixed 되어 있기 때문에 네비게이션 바 height 만큼을 추가해줘야 가리지 않습니다. 

 

이를 아주 간단하게 해결할 수 있습니다. 

 

 

scroll-margin-top: calc('헤더 height' + 10px);

 

 

아래처럼 해당되는 곳에 scroll-margin-top 을 설정해주면 문제를 해결할 수 있습니다. 

 

See the Pen css scroll by HelloHailie (@hellohailie) on CodePen.