blob: bcfe2e9a3ce365f00b1615e2b7a8e697ef3e7ec8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
---
title: IntersectionObserver
slug: Web/API/IntersectionObserver
tags:
- API
- Interface
- Intersection Observer API
- IntersectionObserver
- Reference
browser-compat: api.IntersectionObserver
translation_of: Web/API/IntersectionObserver
---
{{APIRef("Intersection Observer API")}}
[Intersection Observer API](/ko/docs/Web/API/Intersection_Observer_API)의 **`IntersectionObserver`** 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 {{Glossary("viewport", "뷰포트")}}가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단을 제공합니다.
`IntersectionObserver`가 생성되면 루트 내에서 설정된 가시성 비율이 자신의 주시 대상 중에서 나타나는지 감지하기 시작합니다. 한 번 생성한 이후에는 설정을 변경할 수 없으므로, 이미 생성된 감지기 객체는 지정했던 가시성 비율의 감지에만 사용할 수 있습니다. 그래도 하나의 감지기가 다수의 대상을 한꺼번에 주시할 수 있습니다.
## 생성자
- {{domxref("IntersectionObserver.IntersectionObserver()")}}
- : `IntersectionObserver` 객체를 생성합니다. `IntersectionObserver` 객체는 대상 요소의 가시성 비율이 설정한 역치 값을 넘어가는 것을 감지하면 지정한 콜백을 호출합니다.
## 속성
- {{domxref("IntersectionObserver.root")}} {{readonlyinline}}
- : 교차 영역 계산에 사용하는 바운딩 박스의 기준이 되는 {{domxref("Element")}} 또는 {{domxref("Document")}}입니다. `root` 설정을 생성자에 제공하지 않았거나, `root`의 값이 `null`인 경우 최상위 문서의 뷰포트를 사용합니다.
- {{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}
- : 교차 영역을 계산할 때 루트의 {{glossary("bounding box", "바운딩 박스")}}에 적용할 오프셋입니다. 즉, 필요에 따라 계산 용도로 루트 영역을 늘리거나 줄일 수 있습니다. 생성자 설정에 지정한 값은 생성자 내에서 내부 조건에 맞도록 조정 과정을 거치므로, 이 속성의 반환 값이 설정 값과 다를 수도 있습니다. 각각의 오프셋에는 픽셀(`px`)과 퍼센트(`%`)를 사용할 수 있으며, 기본 값은 `0px 0px 0px 0px`입니다.
- {{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}
- : 오름차순으로 정렬된 역치 리스트입니다. 각각의 역치는 대상의 바운딩 박스 영역과 교차 영역 사이의 비율에 대한 역치입니다. 대상에 대한 교차 알림(콜백 호출)은 이 역치 값 중 하나라도 넘어갈 때 발생합니다. 아무 값도 생성자에 지정하지 않은 경우의 기본 값은 0입니다.
## 메서드
- {{domxref("IntersectionObserver.disconnect()")}}
- : 모든 대상의 주시를 해제합니다.
- {{domxref("IntersectionObserver.observe()")}}
- : 주어진 대상 요소를 주시합니다.
- {{domxref("IntersectionObserver.takeRecords()")}}
- : 모든 주시 대상에 대한 {{domxref("IntersectionObserverEntry")}} 배열을 반환합니다.
- {{domxref("IntersectionObserver.unobserve()")}}
- : 특정 대상 요소에 대한 주시를 해제합니다.
## 예제
```js
var intersectionObserver = new IntersectionObserver(function(entries) {
// intersectionRatio가 0이라는 것은 대상을 볼 수 없다는 것이므로
// 아무것도 하지 않음
if (entries[0].intersectionRatio <= 0) return;
loadItems(10);
console.log('새 항목 불러옴');
});
// 주시 시작
intersectionObserver.observe(document.querySelector('.scrollerFooter'));
```
## 명세
{{Specifications}}
## 브라우저 호환성
{{Compat}}
## 같이 보기
- {{domxref('MutationObserver')}}
- {{domxref('PerformanceObserver')}}
- {{domxref('ResizeObserver')}}
|
