微信小程序之判断目标元素是否在可视区域内

1、获取可使用窗口高度

const { windowHeight } = wx.getSystemInfoSync()

2、添加目标元素布局位置查询请求

const query = wx.createSelectorQuery()
query.select('#myElement').boundingClientRect()

3、判断元素是否在可视区域内

// windowHeight = top（目标元素刚进入可视区域）
// windowHeight - top = height（目标元素完全进入可视区域）
// top = 0 (目标元素刚离开可视区域)
// top + height = 0 （目标元素完全离开可视区域 ）

if ((top < windowHeight) && (top + height > 0)) {
  console.log('元素在可视区域出现')
} else {
  console.log('元素在可视区域消失')
}

4、完整 Demo 代码

<!--pages/demo.wxml-->
<view>
  <view class="content-block" />
  <view class="content-block" />
  <view id="myElement" class="content-block" style="background-color: lightcoral;" />
  <view class="content-block" />
  <view class="content-block" />
</view>

// pages/demo.js
Page({
  /**
   * Lifecycle function--Called when page is initially rendered
   */
  onReady: function () {
    const { windowHeight } = wx.getSystemInfoSync()

    setInterval(() => {
      const query = wx.createSelectorQuery()
      query.select('#myElement').boundingClientRect()

      query.exec(rect => {
        const { top, height } = rect[0]

        // windowHeight = top（目标元素刚进入可视区域）
        // windowHeight - top = height（目标元素完全进入可视区域）
        // top = 0 (目标元素刚离开可视区域)
        // top + height = 0 （目标元素完全离开可视区域 ）

        if ((top < windowHeight) && (top + height > 0)) {
          console.log('元素在可视区域出现')
        } else {
          console.log('元素在可视区域消失')
        }
      })
    }, 2000)
  }
})

/* pages/demo.wxss */
.content-block {
  margin-bottom: 40rpx;
  width: 100%;
  height: 700rpx;
  background-color: lightblue;
}