IntersectionObserver.IntersectionObserver()

This translation is incomplete. Please help translate this article from English

IntersectionObserver() 생성자는 새로운 IntersectionObserver 객체를 생성하고 반환합니다. rootMargin 옵션을 지정했다면 값의 구문이 맞는지, 범위가 0.0 이상 1.0 이하인지, 그리고 역치가 오름차순으로 정렬됐는지 검사합니다. 역치 목록이 없다면 배열 [0.0]을 사용합니다.

구문

new IntersectionObserver(callback[, options]);

매개변수

callback
대상 요소의 화면에 보이는 부분 백분율이 역치보다 클 때 호출할 함수입니다. 다음의 두 매개변수를 받습니다.
entries
더 보이거나 덜 보이게 되면서 통과한 역치를 나타내는, IntersectionObserverEntry 객체의 배열.
observer
자신을 호출한 IntersectionObserver.
options Optional
옵저버를 조정할 수 있는 옵션 객체. 지정하지 않는다면 옵저버는 문서의 뷰포트를 루트로 사용하고, 여백은 없이, 역치는 0(1픽셀이라도 변하면 콜백을 호출)이 됩니다. 아래 옵션을 자유롭게 지정할 수 있습니다.
root
대상 요소의 조상인 Element 객체는 경계 사각형이 뷰포트로 간주됩니다. 루트의 가시 영역에 보이지 않는 대상의 어떤 부분도 가시적 인 것으로 간주되지 않습니다.
rootMargin
교차점을 계산할 때, 계산 목적으로 루트를 줄이거나 늘리는 경우, 루트의 bounding_box에 추가 할 오프셋 세트를 지정하는 문자열입니다. 구문은 CSS margin 속성의 구문과 거의 동일합니다. 여백의 작동 방식 및 구문에 대한 자세한 내용은 The root element and root margin in Intersection Observer API을 참조하십시오. 기본 설정은 "0px 0px 0px 0px"입니다.
threshold
관측 대상에 대한 전체 상자 영역(루트)에 대한 교차 영역의 비율을 지정하며, 0.0과 1.0 사이의 숫자 하나 혹은 숫자 배열입니다. 0.0 값은 대상의 단일 픽셀이라도 보여지면, 대상이 보이는 것으로 계산되는 것을 의미합니다. 1.0은 전체 대상 요소가 표시됨을 의미합니다. 임계 값 사용 방법에 대한 자세한 설명은 Thresholds in Intersection Observer API를 참조하십시오. 기본값은 0.0입니다.

반환 값

지정된 가시성 threshold 를 통해 지정된 root 내에서 대상 요소의 가시성을 감시하는 데 사용할 수있는 IntersectionObserver 인스턴스가 반환됩니다. observe() 메소드를 호출하여 지정된 대상의 가시성 변경을 관찰하십시오.

예외

SyntaxError
설정된 rootMargin 이 유효하지 않은 경우.
RangeError
하나 혹은 그 이상의 threshold 가 0.0 - 1.0 사이가 아닌 경우

예제

아래는 요소의 보여지는 부분이 10% 가 넘거나 작아질 때  myObserverCallback 를 호출하는 새로운 intersection observer 를 생성하는 예제입니다.

let observer = new IntersectionObserver(myObserverCallback,
                   {"threshold": 0.1});

명세

Specification Status Comment
Intersection Observer
The definition of 'IntersectionObserver constructor' in that specification.
Working Draft Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
IntersectionObserver() constructor
Experimental
Chrome Full support 51Edge Full support 15Firefox Full support 55
Full support 55
No support 53 — 55
Disabled
Disabled From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera ? Safari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS Full support 12.2Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.