scrollIntoView를 이용해서 스크롤 하는 법?

Question

scrollIntoView를 이용해서 스크롤을 하는데요, 화면의 상단으로 잘 이동하는데 문제는 맨위의 GNB가 해당 내용을 가려버려요. GNB는 fixed여서 숨기거나 이동을 할수가 없어요 ㅜ 혹시 scrollIntoView로 이동하고 GNB만큼 스크롤을 이동시킨다거나 하는 옵션은 없나요?

장익순 · Answer

작성한 소스나 참조할 수 있는 이미지가 있으면 좋겠어요

fixed GNB 의 높이 만큼 margin-top을 주는 방식으로 저는 작업했습니다.

element.scrollIntoView({block: start, behavior: smooth});

.fixed-GNB {
  position: fixed;
  height: 50px;
}

.scrolled-element {
  margin-top: 50px;
}

시간이 지나 해결을 하셨겠지만 작성한 이유는
누군가에게 물어보는 것은 좋지만 생각을 갇혀서 하지 않았으면 좋겠습니다.

산책도 하고 기분전환도 하고 아니면 조금이라도 쉬어서 작업을 하셨으면 좋겠습니다.
이런 문제를 물어본다는 것은 그만큼 힘들고 지쳐 생각할 힘이 없다고 생각이 들어서입니다.

쉬면서 해야 하는데 그렇게 저도 잘 안되긴 해요.

그래도 쉴 때 핸드폰이나 PC 유튜브 말고 스트레칭도 하고 밖에도 그냥 한번 다녀와 보셔요

김하림 · Answer

`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부터 사용 가능하므로 프로젝트에서 해당 버전에 대한 호환성 여부를 만족하는지 꼭 체크해주세요.