Helpers

Intersection Observer

semantic HTML

자식의 viewport 진입과 이탈을 이벤트로 제공합니다.

stablefreeSince 0.4

Live example

Observed target

Target is visible

<section data-standard-component="intersection-observer"><div class="example-observer-target">Observed target</div><output data-example-output aria-live="polite">Target is visible</output></section>

Variants and sizes

The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.

compactcomfortableroomy

Public API

Contract	Value
Implementation	`semantic HTML`
Status	`stable`
License	`free`
Since	`0.4`
HTML contract	`Native HTML elements and attributes`
Events	`Native browser events`

Accessibility

가시성만으로 필수 콘텐츠나 기능을 제거하지 않습니다. 상태를 사용자에게 알릴 때는 x-intersection 결과를 적절한 live region과 연결합니다.

Server template guidance

<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->