Wechat applet to determine whether the target element is within the visible area

1. Obtain the available window height

const {
    
     windowHeight } = wx.getSystemInfoSync()

2. Add target element layout position query request

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

3. Determine whether the element is within the visible area

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

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

4. Complete demo code

<!--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;
}