What is IntersectionObserver? Introduction to IntersectionObserver

This article brings you what is IntersectionObserver? The introduction of IntersectionObserver has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Allows you to track the intersection state of a target element with its ancestor elements or windows. In addition, you can choose to trigger the callback function even though only part of the element appears in the viewport, even just one pixel.

IntersectionObserver Why is it needed?

When we need to monitor whether the target element enters the viewport, we need to monitor the scroll event. A large amount of calculations will cause performance problems

IntersectionObserver How to solve this problem?

IntersectionObserver API is asynchronous and does not trigger synchronously with the scrolling of the target element. That is, the observer will only be executed when the thread is idle. This means that the priority of this observer is very low and will only be executed when other tasks are completed and the browser is free.

IntersectionObserverEntry object

new IntersectionObserver(callback, options)

    let observer = new IntersectionObserver((e) => {
        let isintersecting = e[0].isIntersecting
        console.log(e[0].intersectionRatio)
        if (isintersecting) {
            console.log('我出来了');
        }else{
            console.log('我隐藏了');
        }
    }, {
        root: null
    })
    
    // 观察某个目标元素，一个观察者实例可以观察任意多个目标元素。
    observer.observe(document.querySelector('.scroll-down'))

IntersectionObserverEntry object provides information about the target element, with a total of six attributes.

{
time: the time when the visibility changes, which is a high-precision timestamp in milliseconds
target: the target element being observed, which is a DOM node object
rootBounds: the root element's Information about the rectangular area, the return value of the getBoundingClientRect() method. If there is no root element (that is, scrolling directly relative to the viewport), null is returned.
boundingClientRect: information about the rectangular area of ​​the target element
intersectionRect: between the target element and Information about the intersection area of ​​the viewport (or root element)
intersectionRatio: the visible ratio of the target element, that is, the ratio of intersectionRect to boundingClientRect, which is 1 when it is completely visible, and less than or equal to 0 when it is completely invisible
}

options mainly include

{
    root: null, // 指定与目标元素相交的根元素，默认null为视口
    threshold: [] // [0, 0.5, 1] 当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数
    Magin：‘’ // "100px 0" 与margin类型写法，指定与跟元素相交时的延时加载
}

Instance methods

observe()

Observe a certain target element. An observer instance can observe any number of target elements. Note, some students here may ask: Can I delegate? Can I just call the observe method once to observe all img elements in a page, even those that have not been generated? The answer is no, this is not an event, there is no bubbling.

unobserve()

Cancel the observation of a certain target element. Lazy loading is usually a one-time operation. The callback of observe should call unobserve() directly on that element.

disconnect()

Unobserve all observed target elements

takeRecords()

Understanding this method requires talking about something underlying: inside the browser, when When an observer instance observes several intersecting actions at a certain moment, it will not execute the callback immediately. It will call window.requestIdleCallback() (currently only supported by Chrome) to asynchronously execute the callback function we specified, and it also stipulates The maximum delay time is 100 milliseconds, which is equivalent to the browser executing:

requestIdleCallback(() => {
  if (entries.length > 0) {
    callback(entries, observer)
  }
}, {
  timeout: 100
})

The above is the detailed content of What is IntersectionObserver? Introduction to IntersectionObserver. For more information, please follow other related articles on the PHP Chinese website!