IntersectionObserver

번역이 완료되지 않았습니다. Please help translate this article from English

Intersection Observer API 의 IntersectionObserver 인터페이스는 대상 요소와 그 상위 요소 혹은 최상위 도큐먼트인 viewport와의 교차 영역에 대한 변화를 비동기적으로 감지할 수 있도록 도와줍니다.

 IntersectionObserver 가 생성되면, 루트 내에서 설정된 비율 만큼의 가시성을 계속 감시하도록 설정됩니다. 한번 생성되고 나면, 설정 값은 변경될 수 없으므로, 생성된 감시자 객체는 가시성 정도의 변화를 감시하는 데에만 쓰일 수 있습니다. 하지만 동일한 감시자 객체로 여러 대상 요소를 감시할 수 있습니다.

Constructor

IntersectionObserver.IntersectionObserver()
IntersectionObserver 객체를 생성합니다. 해당 객체는 대상 요소의 가시성이 하나 이상의 설정된 정도 값을 넘을 경우 주어진 콜백 함수를 실행합니다.

Properties

IntersectionObserver.root Read only
대상 요소 (element) 를 감시할 상위 요소. 값을 넣지 않거나 null 일 경우, 최상위 문서의 뷰포트가 사용된다.
IntersectionObserver.rootMargin Read only
교차 정도를 계산할 때 루트의 bounding box 에 적용되는 offset 사각형으로, 루트의 범위를 효과적으로 늘리거나 줄입니다. 이 특성이 반환한 값은, 생성자를 호출 할 때 내부 요구 사항에 맞게 변경 될 수 있으므로 지정된 값과 같지 않을 수 있습니다. 각 offset 은 픽셀(px) 혹은 퍼센트(%)로 표기될 수 있습니다. 기본 값은 "0px 0px 0px 0px" 입니다.
IntersectionObserver.thresholds Read only
임계값 목록. 숫자의 오름차순으로 정렬되며, 각 임계 값은 감시하는 대상의 경계 상자 영역과의 교차 비율입니다. 대상에 대한 알림은 해당 대상에 대한 임계 값이 초과 될 때 생성됩니다. 생성자에 값이 전달되지 않을 경우 0이 사용됩니다.

Methods

IntersectionObserver.disconnect()
IntersectionObserver 가 어떤 대상이라도 감시하는 것을 중지합니다.
IntersectionObserver.observe()
대상 요소에 대한 감시를 시작합니다.
IntersectionObserver.takeRecords()
모든 감시되는 대상의 배열 (IntersectionObserverEntry) 을 리턴합니다.
IntersectionObserver.unobserve()
특정 대상 요소를 감시하는 것을 중지합니다.

Examples

var intersectionObserver = new IntersectionObserver(function(entries) {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
IntersectionObserver
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 Full support 38Safari Full support 12.1WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android Full support 41Safari iOS Full support 12.2Samsung Internet Android Full support 5.0
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 Full support 38Safari 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
disconnect
Experimental
Chrome Full support 51Edge Full support 15
Notes
Full support 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox 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 Full support YesSafari ? WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
observe
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 Full support YesSafari 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
root
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 Full support YesSafari 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
rootMargin
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 Full support YesSafari Full support 12.1
Notes
Full support 12.1
Notes
Notes rootMargin does not work with <iframe>s.
WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS Full support 12.2
Notes
Full support 12.2
Notes
Notes rootMargin does not work with <iframe>s.
Samsung Internet Android Full support 5.0
takeRecords
Experimental
Chrome Full support 51Edge Full support 15
Notes
Full support 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox 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 Full support YesSafari ? WebView Android Full support 51Chrome Android Full support 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
thresholds
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 Full support YesSafari 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
unobserve
Experimental
Chrome Full support 51Edge Full support 15
Notes
Full support 15
Notes
Notes Available since Windows Insider Preview Build 14986
Firefox 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 Full support YesSafari 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.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also