Intersection Observer 란?
어떤 요소가 뷰포트영역에 들어오고 나가는 것을 판단하는 기능을 한다.
const io = new IntersectionObserver(function(entries){
entries.forEach(function(entry){
...
})
})
const h1Els = document.querySelectorAll('h1')
h1Els.forEach(function(el){
io.observe(el)
})
1. InterSectionObserver 생성자를 호출합니다.
2. h1 요소들을 모두 찾아 유사 배열 형태로 h1Els 에 할당합니다.
3. h1 요소들을 InterSectionObserver 에 등록합니다.
isIntersecting 이 true 이면 target 요소가 화면에 현재 보이는 상태를 의미입니다.
따라서 이 불리언 값을 사용하여 요소가 화면에 보일때, 보이지 않을때 동작을 다르게 적용할 수 있습니다.
'카카오 테크 캠퍼스 > HTML CSS JS Advanced' 카테고리의 다른 글
[카테캠 선택강의] 반응형 적용 (0) | 2023.05.17 |
---|---|
[카테캠 선택강의] 섹션과 푸터 만들기 (2) | 2023.05.16 |
[카테캠 선택강의] 콘텐츠 구성 (0) | 2023.05.13 |
[카테캠 선택 강의] 내비게이션 사용기술 정리 (2) | 2023.05.12 |
[카테캠 선택강의] 애플 반응형 웹사이트 헤더 (0) | 2023.05.12 |