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

问题

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

思路

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就是根元素

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

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

4. 销毁观察
   可以在组件销毁的生命周期中去掉观察，也可以在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();