Web APIs [스크롤 정보] Window.scrollY, Element.scrollIntoView()

.·2022년 8월 10일

Window.scrollY

Window.scrollY는 문서가 현재 스크롤된 정도를 pixel값으로 반환합니다.
현재 스크롤된 위치를 알고 싶을 때 사용합니다.

Element.scrollIntoView()

Element.scrollIntoView()는 화면의 특정 위치로 이동시켜 줍니다.

버튼을 눌렀을 때 원하는 요소의 위치로 이동을 해야할 때 사용할 수 있습니다.

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

alignToTop옵션과 scrollIntoViewOptions옵션이 존재하는데
alignToTop옵션은 boolean값을 받고

boolean 값이
true이면 scrollIntoViewOptions: {block: "start", inline: "nearest"}
false이면 scrollIntoViewOptions: {block: "end", inline: "nearest"}

scrollIntoViewOptions옵션
behavior: 이동 애니메이션 설정: auto, smooth
block: 수직 정렬: start, ceter, end, nearest
inline: 수평 정렬: start, center, end, nearest

profile
공부하고 정리하는 블로그

0개의 댓글