_

DOM element 위치 구하기

getBoundingClientRect()

만약 값을 구할 엘리먼트가 감춰져 안 보인다면 화면 밖에 위치하므로 당연히 마이너스 값이 나타나게 된다. 이때 사용하는것이 getBoundingClientRect()이다
단 getBoundingClientRect()을 사용할때는 리플로우 현상이 일어날수있다.
리플로우(reflow): 리플로우는 브라우저가 웹 페이지의 일부 또는 전체를 다시 그려야하는 경우 발생한다.

IntersectionObserver()

리플로우 현상이 일어나지 않게 하면서 getBoundingClientRect()와 같은
효과를 나타낼수있는 DOM API

const io = new IntersectionObserver(callback[, options])

callback

• callback: 타겟 엘리먼트가 교차되었을 때 실행할 함수
• entries: IntersectionObserverEntry 객체의 리스트. 배열 형식으로 반환하기 때문에 forEach를 사용해서 처리를 하거나, 단일 타겟의 경우 배열인 점을 고려해서 코드를 작성해야 한다.
• observer: 콜백함수가 호출되는 IntersectionObserver

options

• root
• default: null, 브라우저의 viewport
  교차 영역의 기준이 될 root 엘리먼트. observe의 대상으로 등록할 엘리먼트는 반드시 root의 하위 엘리먼트여야 한다

참고 : http://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/

scroll 정보

// 화면의 Y축의 상단값 
window.pageYOffset 
// 화면의 Y축의 하단값 
window.pageYOffset + window.innerHeight