监听网页页面元素是否在窗口可视

就是理由新增的 api IntersectionObserver可以引入下方链接适配兼容

https://cdn.jsdelivr.net/npm/intersection-observer-polyfill@0.1.0/dist/IntersectionObserver.min.js

用法

// elementArray：是需要监听的页面dom元素组，建议使用一个div包裹住需要监听的dom元素
// callback: 是回调函数
const monitorVisualArea = (elementArray, callback) => {
  try {
    // 创建JS交叉观察函数
    const observer = new IntersectionObserver((mutaions) => {
      const interArr = mutaions.filter((item) => item.isIntersecting);
      // 创建IntersectionObserver对象
      if (interArr.length) {
        // 传入参数并调用回调函数
        callback(interArr);
      }
    });
    for (let i = 0; i < elementArray.length; i++) {
      // 需要监听的元素
      observer.observe(elementArray[i]);
    }
  } catch (e) {
    console.log(e);
  }
};

const img1 = document.querySelector("#img1");
monitorVisualArea([img1], () => {
  console.log("显示");
});