The cause of

Today, my friend gave me an example of an infinite scrolling list, and let me analyze a wave; To the source from the nuggets of the big man’s article, here thanks to the big man to share.

IntersectionObserver

The Chinese name for this API is “cross observation period”, which means whether the element being observed overlaps with the visible window. This may not be very clear, but it checks whether the element being observed appears on the screen.

use

It is a constructor, so you call it as follows

const io = new IntersectionObserver(callback, options) 
Copy the code

Instances of the API

Add observation elements
IO. Observe (eleA) IO. Observe (eleA) IO. Observe (eleB)...Copy the code
Cancel element observation
io.unobserve(eleA)
Copy the code
Close observer
io.disconnect()
Copy the code

It receives two arguments, callback and options, which are parsed below.

callback

The callback function is called twice, once when the element starts to enter the window and once when the element leaves the window completely.

The callback function to receive a parameter of entries is observed to enter the visual element of the array, each element IntersectionObserverEntry the implementation of the interface in the following table:

The name of the type introduce note
time number The time at which visibility changes is a high-precision timestamp in milliseconds
target DomElement The object element being observed is a DOM node object
rootBounds ClientRect Information about the rectangular region of the root element, the return value of the getBoundingClientRect() method, or null if there is no root element (that is, scrolling directly relative to the viewport)
boundingClientRect ClientRect Information about the rectangular region of the target element
intersectionRect ClientRect Information about the area where the target element intersects the viewport (or root element)
intersectionRatio number The visibility ratio of target elements, i.e., the proportion of intersectionRect to boundingClientRect, is 1 when it is completely visible, and less than or equal to 0 when it is completely invisible

options

The options parameter is used to configure the trigger timing of the scroll container and callback:

The name of the type introduce note
threshold number[] This property determines when the callback function is fired. It is an array and each member is a threshold value, which defaults to [0], i.e., intersectionRatio triggers the callback function when it reaches 0.
root DomElement Property specifies the container node (the root element) on which the target element is located. Note that the container element must be the ancestor node of the target element.
rootMargin string The margin of the root element is defined to expand or reduce the size of the rootBounds rectangle to affect the intersectionRect area. It uses CSS definitions such as 10px, 20px, 30px, 40px for top, right, bottom, and left.

Refer to the link

  1. www.ruanyifeng.com/blog/2016/1…
  2. Juejin. Cn/post / 684490…