Cacher is the code snippet organizer for pro developers

data: {
  activeRect: {}
},
  
handleTouchEnd: function(e) {
  if (this.timer) {
    clearTimeout(this.timer);
    this.timer = null;
  }
  this.timer = setTimeout(() => {
    wx.createSelectorQuery().selectAll('.item').boundingClientRect().exec(res => {
      const {
        left: activeLeft,
        right: activeRight
      } = this.data.activeRect;
      for (const {
          left,
          right,
          id
        } of res[0]) {
        if (activeLeft <= left && activeRight >= left) {
          console.log(`id: ${id} is actived`)
        }
      }
    })
  }, 500)
},

onLoad() {
  // ...
  
  wx.createSelectorQuery().select('#target').boundingClientRect().exec(res => {
    const {
      left,
      right,
      top,
      bottom
    } = res[0]
    this.setData({
      activeRect: {
        left,
        right,
        top,
        bottom
      }
    })
  });
  
  // ...

}

<view class="wrapper">
  <view class="target" id="target" />
  <view class="container" dir="ltr" wx:if="{{activeRect}}" bind:touchmove="handleTouchEnd">
    <view class="item" id="item_1" >1</view>
    <view class="item" id="item_2" >2</view>
    <view class="item" id="item_3" >3</view>
    <view class="item" id="item_4" >4</view>
    <view class="item" id="item_5" >5</view>
    <view class="item" id="item_6" >6</view>
    <view class="item" id="item_7" >7</view>
    <view class="item" id="item_8" >8</view>
  </view>
</view>

.container {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  overflow: auto;
  outline: 1px dashed lightgray;
  scroll-snap-type: x mandatory;
  position: relative;
}

.target {
  content: '';
  position: absolute;
  left:33%;
  right: 33%;
  top: 0;
  display: block;
  /* border: 1px solid red; */
  height: 100%;
  width: 33%;
}


.item {
  scroll-snap-stop: always;
  text-align: center;
  scroll-snap-align: center;
  flex: none;
  font-size: 64px;
  width: 33%;
}