[JavaScript] 스크롤 위치 높이

 

1. scrollTop, scrollY, pageYOffset : 상단에서 수직으로 멀어진값

 

- Element 기준

const scrollTop = document.documentElement.scrollTop;
            //const scrollTop = document.querySelector("html").scrollTop; 

 

- Window 기준 
const scrollY = window.scrollY; 

 

- Window 기준 : IE 호환
const pageYOffset = window.pageYOffset; 

 

셋다 값은 동일.

 

2. clientHeight, innerHeight  : margin, border제외 화면에 보이는 높이, 시각적으로 보이는 영역 스크린 창

 

- Element 기준

const clientHeight = document.documentElement.clientHeight; 
            //const clientHeight = document.querySelector("html").clientHeight;  

 

- Window 기준
            const innerHeight = window.innerHeight; 

 

값은 동일.

 

3. scrollHeight, offsetHeight : 전체 높이

 

- hidden으로 화면이 보이지 않는 높이값까지 반환

const scrollHeight = document.documentElement.scrollHeight; 
            //const scrollHeight = document.querySelector("html").scrollHeight;  

 

- margin제외 border포함 화면에 보이는 높이
const offsetHeight = document.body.offsetHeight; 

 

값은 동일.

 

 

 

참조: 

https://kincoding.com/entry/마우스-wheel-동작-이벤트-및-감지-Part-2-scrollTop-scrollHeight-clientHeight