IntersectionObserver.observe()

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The IntersectionObserver observe() 메서드는 IntersectionObserver 객체가 관찰할 엘리먼트 목록에 단일 엘리먼트를 추가합니다. 하나의 옵저버 객체는 단일한 threshold와 root를 가지지만 복수의 타겟 엘리먼트의 가시성 변화를 관찰할 수 있습니다. 만일 엘리먼트 관찰을 중지하고 싶다면 IntersectionObserver.unobserve() 메서드를 호출하세요.

특정 엘리먼트의 가시성이 다른 옵저버의 가시성 threshold와 교차할 때(IntersectionObserver.thresholds 참조), 옵저버 콜백은 발생한 교차성 변경을 알리는 IntersectionObserverEntry 객체와 함께 실행됩니다.

노트. 이 디자인은 복수 엘리먼트의 교차성 변경이 하나의 콜백 실행을 통해 처리되는 것을 허용합니다.

문법

IntersectionObserver.observe(targetElement);

Parameters

targetElement
가시성이 감시될 root 내부의 element. 해당 엘리먼트는 루트 엘리먼트의 자손 노드여야 합니다(혹은 현재 root가 document의 viewport일 때는 현재 document 내부의 엘리먼트여야 합니다).

Return value

undefined.

Examples

<<<...>>>

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
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

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.

See also