[Javascript] 브라우저 창 사이즈와 스크롤

브라우저 창의 너비와 높이

✔️ document.documentElement.clientWidth

✔️ document.documentElement.clientheight

 

스크롤 정보 얻기

✔️ window.pageXoffset : 세로 스크롤에 의해 가려진 위쪽 영역 높이

✔️ window.pageYoffset : 가로 스크롤에 의해 가려진 왼쪽 영역 높이

 

scrollTo, scrollBy 로 스크롤 상태 변경하기

✔️ window.scrollBy(x,y) : 현재 위치를 기준으로 상대적으로 값을 조정한다.

✔️ window.scrollTo(x,y) : 절대 좌표를 기준으로 페이지 스크롤 상태를 변경한다.

 

scrollIntoView

✔️ 해당 요소가 창 제일 위로, 창 가장 아래로 보이도록 스크롤 상태를 변경해줄 수 있다.

✔️ 브라우저, 모바일 호환이 약함.

 

스크롤 막기

✔️ document.body.style.overflow = "hidden";

✔️ document.body.style.overflow = "";

📌 으로 고정하고 풀 수 있는데 버그가 있기 때문에 clientWidth 등을 조정해줄 필요가 있음.

 

Reference

• https://ko.javascript.info/size-and-scroll-window#ref-184