scrollIntoView를 사용함으로써 페이지 전체가 움직이는 현상

특정한 상황에서 페이지 전체(html/body)가 움직여버리는 현상이 생겼다.

나의 경우엔 header를 고정, content를 header의 height(60px)만큼 margin-top을 적용시켜놨는데, 특정 상황에서 자꾸 페이지 전체가 60px씩 위로 올라가버리고, 창의 하단엔 그만큼의 여백이 생겨버렸다.

하단에 생긴 여백

 

https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move

ScrollIntoView() causing the whole page to move

찾아보니, 스택 오버플로어에 같은 현상이 일어나는 사람이 많았다. 문제는 scrollIntoView를 사용한 경우였다.

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

이게 처음 작성한 scrollIntoView의 옵션이었는데, 여기서 block 옵션을 'start'가 아닌 'nearest'로 변경해주면 된다.

 

start : 해당 요소의 top이 뷰포트에 top에 맞닿도록 강제로 스크롤 조정

nearest : 요소가 이미 뷰포트에 노출중이라면 작동하지 않음, 스크롤 최소화.

 

나의 경우 body에 스크롤이 생기지 않고 아예 화면 자체가 올라갔던 이유는, body에 overflow: hidden 속성때문이었다.