记录鼠标在页面的滚动停止位置

记录鼠标在页面的滚动停止位置


组件的生命周期可以在lifetimes字段进行声明
我们需要了解某个模块是否进入了"视口",即用户能不能看到它,这里需要用到IntersectionObserver API,可以自动观察元素是否可见

lifetimes: {
    ready() {
      // * 记录滑动停止位置
      wx.nextTick(() => {
        this._intersectionObserver = this.createIntersectionObserver({
          thresholds: [0.5],
          // initialRatio: 0.8,
          observeAll: true
        })
          .relativeToViewport({
          	// top: 0,
            bottom: 0,
            // left: 0,
            // right: 0
          })
        this._intersectionObserver.observe('.burry-point', (res) => {
          if (res.intersectionRatio >= 0.5) {
          	// console.log(res.dataset.burryPoint);
            // console.log(res)
            // console.log(res.intersectionRatio)
            this.data.exitlocation = res.dataset.burryPoint
          }
        })
      })
    }
  },
  1. intersectionRatio: 目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0
  2. threshold参数,用来设置当change.intersectionRatio属性,达到指定值时,也会触发回调函数。threshold的默认值是:[0],即只有在开始进入,或者是完全离开视图区域时,才会触发。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值