“This is the 27th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021”

introduce

IntersectionObserver is an interface in JavaScript that is subordinate to the IntersectionObserver API and provides a way to asynchronously observe the intersecting state of a target element with its ancestor element or top-level document viewport. Ancestor elements and viewports are called roots. In other words, IntersectionObserver can monitor the intersecting state of elements with document viewport (viewport). For example, a rectangular element in a page is completely visible at the beginning, and its intersecting state with the visible area of the browser is 100%. If only half of this element is visible, the cross state is 50%

usage

You need to instantiate the interface and observe the element with the observe method.

// Receive two arguments callback option
var io = new IntersectionObserver(callback, options);

// Start observing (multiple elements can be observed)
io.observe(document.getElementById('example1'));
io.observe(document.getElementById('example2'));

// Stop observing an element
io.unobserve(element);

// Close the viewer
io.disconnect();
Copy the code

Callback for the callback function, when the cross state changes triggered when, return a entries parameters, is an array, each member is a IntersectionObserverEntry object. Observe how many objects are observed, and the array will be loaded once initially.

IntersectionObserverEntry object

{time: 3893.92, rootBounds: ClientRect {bottom: 920, height: 1024, left: 0, right: 1024, top: 0, width: 920 }, boundingClientRect: ClientRect { // ... }, intersectionRect: ClientRect { // ... }, intersectionRatio: 0.54, target: element}Copy the code
  1. timeread-only
    • Returns a record fromIntersectionObserverThe timestamp from the time origin to the time when the cross was triggered (DOMHighResTimeStamp).
  2. rootBoundsread-only
    • Returns aDOMRectReadOnlyUsed to describe roots in intersection observers.
  3. boundingClientRectread-only
    • Object that contains boundary information about the target elementDOMRectReadOnly. The calculation method of boundary andElement.getBoundingClientRect()The same.
  4. intersectionRectread-only
    • Returns aDOMRectReadOnlyUsed to describe the area where the root and target elements intersect.
  5. intersectionRatioread-only
    • returnintersectionRect 与 boundingClientRectRatio value of.
  6. targetread-only
    • The element whose intersection region changes with the root.

Parameters of the Options

  • rootListen on the element’s ancestor element object, whose boundary box is treated as an viewport. Any invisible part of the target in the visible region of the root is treated as invisible.
  • rootMarginA bounding box that is added to the root when the crossover value is evaluatedbounding_box), a set of offsets of type string, can effectively narrow or expand the determination of the root to meet the calculation needs. Syntax is roughly the same as in CSSmarginAttribute equivalent; The default value is “0px 0px 0px 0px”.
  • thresholdSpecifies the ratio of a listening target to the boundary box cross area. It can be a specific value or an array of values between 0.0 and 1.0. Specifying a value of 0.0 means that the listening element is considered visible even if it crosses the root by 1 pixel. Specifying a value of 1.0 means that the entire element is visible only when it is visible. The default value of the threshold is 0.0.

That is, the threshold attribute determines when the callback function is triggered.

new IntersectionObserver(
  entries= > {/ *... * /}, 
  {
    threshold: [0.0.25.0.5.0.75.1]});Copy the code

[0, 0.25, 0.5, 0.75, 1] means that the callback function is triggered when the target element is 0%, 25%, 50%, 75%, 100% visible.

example

<style>
body { height: 3000px; width: 3000px; }
#box1 { width: 300px; height: 300px; background-color: red; margin-top: 100px; margin-left: 300px; }
</style>
<body>
<div id="box1"></div>
<script type="text/javascript">

const io = new IntersectionObserver(entries= > {
  console.log(entries)
}, {
  threshold: [0.0.25.0.5.0.75.1]
})
io.observe(document.getElementById('box1'))

</script>
Copy the code