如何判断哪些元素在视口下面

问题

在一个滚动列表中,顶部有一个【全部置入】的按钮,点击按钮要将可视区域内的图片置入到页面中

思路

  1. 点击按钮时,循环遍历每个元素算出它的坐标-滚动条距离顶部的scrollTop
  2. 通过IntersectionObserver观察者来判断哪些元素在可视区域内

实现

这次就使用IntersectionObserver来实现

  1. 创建IntersectionObserver的实例
let observer = new IntersectionObserver(callback, {  
  root: null, // 视口  
  rootMargin: '0px',  
  threshold: [0.1] // 当目标元素有10%进入视口时触发  
});

observer是IntersectionObserver的实例,callback是回调函数,root是确定视口元素,null就是根元素

  1. 给目标元素添加观察
    observer.observe(element)

  2. 元素发生变化时会触发callback回调函数,元素的entry.isIntersecting为true时说明该元素在视口中满足条件,可以对这些元素做处理

  3. 销毁观察
    可以在组件销毁的生命周期中去掉观察,也可以在callback回调结束时关闭观察observer.disconnect()

// 回调函数  
function callback(entries, observer) {  
  for (let entry of entries) {  
    // 每个 entry 代表一个被观察的目标元素  
    if (entry.isIntersecting) {  
      console.log('Element is in the viewport.');  
    } else {  
      console.log('Element is NOT in the viewport.');  
    }  
  } 
  observer.disconnect()
}  
  
// 创建 IntersectionObserver 实例  
let observer = new IntersectionObserver(callback, {  
  root: null, // 视口  
  rootMargin: '0px',  
  threshold: [0.1] // 当目标元素有10%进入视口时触发  
});  
  
// 目标元素  
let targetList = document.querySelector('.elementList');  
  targetList.forEach(element => {
  // 开始观察目标元素
  observer.observe(element);
})
  
// 停止观察  
// observer.unobserve(target);  
// 或者  
// observer.disconnect();
posted @   嘿!那个姑娘  阅读(13)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示