# Class: IntersectObserver

## IntersectObserver

#### new IntersectObserver(options)

  Wrapper for the IntersectionObserver API

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `options` | Object | ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `onIntersecting` | IntersectObserver_Handler |  |  | Callback function
  `onlyOnce` | Boolean | <optional> | false | Execute the callback only once per $elements the first time it intersect the viewport
  `ioOptions` | Object | <optional> |  | Native options to create to IntersectionObserver API ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `root` | HTMLElement | <optional> | null | Element used as display. If null, use the screen viewport
  `rootMargin` | String | <optional> | "0px" | Margin around the viewport. Can be defined as margin css property: "10px 20px 30px 40px" (top, right, bottom, left)
  `threshold` | Float | Array.<Float> | <optional> | 0 | Percentage (0.0 to 1.0) of visibility needed to execute the callback function. To call the function when the visibility is at least 50%: threshold = 0.5. To call the function every 25%: threshold=[0, 0.25, 0.5, 0.75, 1]

  ##### Example

      let io = new IntersectObserver( {
           "onIntersecting": callback
      } );

      function callback( $target, entry ) {
           console.log( `${ $target } enter the screen viemport` );
           console.log( `${ $target } is intersecting the viewport: ${ entry.isintersecting }` );
      }

      // To add an HTMLElement, a NodeList or an array of HTMLElement to the observer
      io.add( $someHTMLElement );
      io.add( [ $someHTMLElement2, $someHTMLElement3 ] );
      io.add( $someNodList );

      // To remove an HTMLElement, a NodeList or an array of HTMLElement from the observer
      io.remove( $someHTMLElement2 );
      io.remove( $someNodList );

      // To remove all elements from the observer
      io.clear();

### Methods

#### add($elements)

  Add elements to be observed

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `$elements` | HTMLElement | Array.<HTMLElement> |

  ##### Returns:

  Type
    IntersectObserver

#### clear()

  Stop all elements to be observed

  ##### Returns:

  Type
    IntersectObserver

#### remove($elements)

  Stop some elements to be observed

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `$elements` | HTMLElement | Array.<HTMLElement> |

  ##### Returns:

  Type
    IntersectObserver

### Type Definitions

#### IntersectObserver_Handler($target, entry)

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `$target` | HTMLElement |
  `entry` | IntersectionObserverEntry | Native IntersectionObserver callback parameter ###### Properties
  Name | Type | Description
  --- | --- | ---
  `boundingClientRect` | DOMRectReadOnly | { x, y, width, height, top, right, bottom, left }
  `intersectionRatio` | Number |
  `intersectionRect` | DOMRectReadOnly |
  `isIntersecting` | Boolean |
  `rootBounds` | DOMRectReadOnly |
  `target` | HTMLElement |
  `time` | DOMHighResTimeStamp |

#### Search results