# Intersection Observers

detecting visibility of an element, or the relative visibility of two elements in relation to each other

Allows you to register callback when element eneters or exits another element/viewport, doesn't tell you exact # of pixels or which ones but more if they intersect

```javascript
let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0 //100% target is visible
}

let callback = (entries, observer) => { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
}

let observer = new IntersectionObserver(callback, options);

let target = document.querySelector('#listItem');
observer.observe(target);
```

**root** - viewport/element for checking visiblity of the target. Must be the ancestor of the target. Defaults to the browser viewport

**rootMargin** - Margin around the root before computing intersections. CSS margin values. Defaults to all zeros.

**threshold** - what percentage visible before fired, can specify array to have multiple triggers


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://openai.gitbook.io/code-cheatsheets/js/webjs/intersectionobservers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.