Javascript 스크롤 위치 조정 함수

모달, 팝업 페이지 같이 기존 화면 위에 덮어 씌우는 형태의 페이지 같은 경우 window 명령어로는 스크롤 이동 함수가 제대로 적용되지 않는 경우가 있어, 찾아본 결과 엘리먼트에 스크롤 함수를 적용시키면 작동되는 것을 확인해서 글을 작성한다.

하이브리드 앱에서 기존에 사용하던 스크롤 함수가 제대로 작동하지 않아, 모달이나 팝업등에 적용한 스크롤 위치 조정 함수.

 

var targetElement = document.querySelector('#targetElementId');

targetElement.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

 

• behavior
  transition animation. auto or smooth 중 하나 선택 (Default auto)
  smooth 옵션을 주면 부드럽게 스크롤링!
  
• block
  수직으로 스크롤링될 때 정렬. start, center, end, or nearest. (Default start)
  start:  element의 젤 윗부분이 브라우저 맨 위로 오도록 정렬
  center: element가 브라우저 중간으로 오도록 정렬
  end: element의 젤 아랫부분이 브라우저 맨 밑으로 오도록 정렬
  nearest: 가까운 곳
• inline
  수직으로 스크롤링될 때 정렬 start, center, end, or nearest. (Default nearest)

참고 : https://jeleedev.tistory.com/87

[Web APIs] scrollBy, scrollTo, scrollIntoView

참고 : https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView

element.scrollIntoView - Web API | MDN