`scroll-padding` 또는 `scroll-margin`를 사용해서 해결하는 방법이 있습니다. 스크롤 컨테이너에는 `scroll-padding`을, 컨테이너 내 엘리먼트에는 `scroll-margin`을 사용하시면 됩니다. 예를 들어 이동하려는 콘텐츠에 ``` .article { scroll-margin-top: 10px; } ``` 요렇게 적용하고 아래처럼 `scrollIntoView`를 실행하면 ``` const el = document.querySelector(".article"); el.scrollIntoView({block: "start", behavior: "smooth"}); ``` 뷰포트의 위쪽 border가 엘리먼트의 위쪽 border와 정렬되도록 뷰포트가 스크롤되지만 10픽셀의 추가 공간이 생깁니다. 10픽셀은 예시이며, GNB의 실제 height 만큼 주시면 해당 픽셀만큼 여유 공간을 만들 수 있으실거에요. 단, 해당 속성은 Safari 14.1부터 사용 가능하므로 프로젝트에서 해당 버전에 대한 호환성 여부를 만족하는지 꼭 체크해주세요.

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 3월 12일 오전 9:30

댓글 0