# 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	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.

Page({
  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
    })
  }
})