🖱scrollTop , scrollHeight, clientHeight

window의 scroll 감지

window.addEventListner('scroll',function(){
const scrollTop = window.scrollY
})

현재 좌표값 + 전달된 좌표값 : window.scrollBy(x,y)
전달된 좌표으로 이동 : window.scrollTo(x,y)

scroll 높이 구하기

---

scrollTop

• 원글 맨 처음부터 ~ 현재 화면에 보이는 부분까지의 길이가 scrollTop이다 (절대적인 요소)
• 현재 스크롤의 위치를 알 수 있다.

scrollHeight

• 화면 바깥으로 빠져나간 부분까지 모두 포함해서 전체의 글의 길이
  

clientHeight

• client라는 의미대로 사용자가 눈에 보이는 그 범위만큼을 말한다.
  현재 화면에 보이는 height (스크롤 사이즈, border size는 포함 x)
  

조건 성립

스크롤 영역을 가진 div(Lorem)를 스크롤 영역으로 만들었다.

• 조건 : 이 페이지에서 Lorem영역 안에서 스크롤 시 스크롤 마지막에 도달한 경우 alert 창을 띄운다.
  

const scroll = document.querySelector('.lorem').scrollTop
const 실제높이 = document.querySelector('.lorem').scrollHeight 
const 보이는높이 = document.querySelector('.lorem').clientHeight div높이

아래와 같이 설정할 수 있을까?

if(scroll === 실제높이)  // ❌

scroll은 보이는 높이까지의 값이 나오지않는다. 따라서 아래와 같이 식을 바꿔주어야한다.

if(scroll + 실제높이 >= 보이는높이) ⭕️