# IntersectionObserver IntersectionObserver.relativeToViewport(Object margins)

with Promise style call: Not supported

Mini Program plugin: Support

Specify the page display area as one of the reference areas

# parameter

# Object margins

Used to extend (or contract) the boundaries of the reference node layout area

attribute type Default values Required Introductions
left number no Left bound of node layout area
right number no Right bound of node layout region
top number no Upper Boundary of Node Layout Area
bottom number no Lower boundary of node layout area

# Return value

# IntersectionObserver

# sample code

In the following example code, if the target node uses the selector .target-class Specify) enter the display area below 100px The callback function is triggered.

  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
      res.intersectionRatio // Proportion of intersecting regions to the layout area of the target node
      res.intersectionRect // Intersecting region
      res.intersectionRect.left // Left boundary coordinates of intersecting region
      res.intersectionRect.top // Upper boundary coordinates of intersecting regions
      res.intersectionRect.width // Width of intersecting area
      res.intersectionRect.height // Height of intersection area