小程序监听节点显示或消失在视口区域

watchScroll(){
        // target-class在scrollview区域 出现或者小时时触发
        wx.createIntersectionObserver().relativeTo(".scrollview").observe('.target-class', (res) => {
          console.log("res.intersectionRatio",res.intersectionRatio) // 相交区域占目标节点的布局区域的比例
          console.log("res.intersectionRect.top",res.intersectionRect.top)
      })

      // target-class2出现或者消失在视口区域内触发
      wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class2', (res) => {
          res.intersectionRatio // 相交区域占目标节点的布局区域的比例
          res.intersectionRect // 相交区域
          res.intersectionRect.left // 相交区域的左边界坐标
          res.intersectionRect.top // 相交区域的上边界坐标
          res.intersectionRect.width // 相交区域的宽度
          res.intersectionRect.height // 相交区域的高度
      })

    }

<view style="overflow-y: auto;height: 50vh;margin-top: 20vh;border: 2rpx solid red;" class="scrollview">
  <view style="height: 2000rpx;"></view>
  <view class="target-class" style="width: 200rpx;height: 200rpx;background: red;"></view>
  <view style="height: 2000rpx;"></view>
</view>