代码示例

const ob = new IntersectionObserver(entries=>{
  console.log('以下元素可视范围发生变化');
  console.log(entries);
}, {
  root: null,  // 被监听元素的父元素 (相对于该元素的可视范围), 默认即视口
  threshold: 0.5 // 阈值, 可视范围阈值, 0-1
});

// 监听DOM元素
ob.observe(document.querySelector('#loading'));

实现效果

往下滑动滚动条
被监听子元素

兼容性情况

image.png