IntersectionObserver IntersectionObserver.relativeToViewport(Object margins)

指定页面显示区域作为参照区域之一

参数

Object margins

用来扩展(或收缩)参照节点布局区域的边界

属性类型默认值必填说明
leftnumber节点布局区域的左边界
rightnumber节点布局区域的右边界
topnumber节点布局区域的上边界
bottomnumber节点布局区域的下边界

返回值

IntersectionObserver

示例代码

下面的示例代码中,如果目标节点(用选择器 .target-class 指定)进入显示区域以下 100px 时,就会触发回调函数。

  1. Page({
  2. onLoad: function(){
  3. wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
  4. res.intersectionRatio // 相交区域占目标节点的布局区域的比例
  5. res.intersectionRect // 相交区域
  6. res.intersectionRect.left // 相交区域的左边界坐标
  7. res.intersectionRect.top // 相交区域的上边界坐标
  8. res.intersectionRect.width // 相交区域的宽度
  9. res.intersectionRect.height // 相交区域的高度
  10. })
  11. }
  12. })