首页 > 其他分享 >用IntersectionObserver来处理已读未读

用IntersectionObserver来处理已读未读

时间:2022-10-31 20:00:08浏览次数:112  
标签:observer val 未读 处理 已读 IntersectionObserver

* 参考地址:Intersection Observer - Web API 接口参考 | MDN (mozilla.org)

一、IntersectionObserver的使用场景

主要用来监听目标元素和指定的根元素之间,在滚动界面的时候,当目标元素进入界面的时候触发回调可以处理一些业务逻辑,例如已读未读的处理;

二、demo展示

 /** 处理已读 */
      handleHasRead() {
        if (这里加自己业务逻辑,如果当前不需要处理是否到达可视范围,直接返回) {
          return
        };
        
        const options = {
          root: document.querySelector('.observerScroll'), //视窗祖先元素的指定
          rootMargin: '0px',
          threshold: 0,
        }
        const observer = new IntersectionObserver((val) => {
          if (val[0] && val[0].isIntersecting) {
            // 走接口已读,然后销毁观察0
            。。。。//处理当前已读的逻辑
            observer.disconnect();//消息已读,停止监听
          }
        }, options);
        observer.observe(document.querySelector(`.message__wrap--${this.msg.mId}`));
      },    

 

标签:observer,val,未读,处理,已读,IntersectionObserver
From: https://www.cnblogs.com/chun321/p/16845559.html

相关文章

  • IntersectionObserver 检测元素是不是可见
    constintersectionObserver=newIntersectionObserver((entries,observer)=>{entries.forEach(item=>{const{intersectionRatio,target}=item//intersec......
  • 关于手机端H5通知已读未读的一个简单demo
    情景:系统发通知给每一个员工,每个员工有一个系统系统,点击提示,通知列表有已读和未读主要通过redis来实现,大致思路:将通知和员工绑定作为key,如果员工点进链接证明已读则将key......
  • 设计思路-已读未读设计
    需求1.针对工单,或者会话已读未读设计。2.未读数量  方案一首先想到的可能是在消息表的每个字段上设计一个已读未读字段,但是消息维护成本和频率高,比如整个sass......
  • 使用IntersectionObserver 实现懒加载 && 记录一个懒加载失效的原因
    先说说我实现懒加载失效的一个原因:是图片没有写高度猜想是没有给图片高度,所以底层没法进行计算容器是否出现在视图中 实现一个IntersectionObserver//配置参数请看......