IntersectionObserver监听简单示例

<template>
    <div id="IntersectionObserverEntry-Area">
        <h1>Intersection Observer Example</h1>
        <div id="target"></div>
    </div>
</template>

<script setup>
const init = () => {
    // 创建一个 IntersectionObserver 实例
    let observer = new IntersectionObserver(
        (entries, observer) => {
            entries.forEach(entry => {
                entry.target.style = 'background-color: green;'
                console.log(`entry===>`, entry.target.id)
                if (entry.isIntersecting) {
                    // 当目标元素进入视口时执行的操作
                    console.log('目标元素已进入视口')
                } else {
                    entry.target.style = 'background-color: red;'
                    // 当目标元素离开视口时执行的操作
                    console.log('目标元素已离开视口')
                }
            })
        },
        // threshold 滚动到被监听元素的50% 时触发改变背景色
        { threshold: 0.5 }
    ) // 设置交叉比例为 50%

    // 需要监视的目标元素
    let targetElement = document.querySelector('#target')

    // 开始观察目标元素
    observer.observe(targetElement)
}
onMounted(() => {
    init()
})
</script>
<style scoped lang="less">
#target {
    width: 200px;
    height: 200px;
    background-color: red;
    margin-top: 800px;
}
#IntersectionObserverEntry-Area {
    height: 1000px;
}
</style>

纯html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Intersection Observer Example</title>
  <style>
    #target {
      width: 200px;
      height: 200px;
      background-color: red;
      margin-top: 500px;
    }
    #IntersectionObserverEntry-Area {
      height: 1000px;
    }
  </style>
</head>
<body>
  <div id="IntersectionObserverEntry-Area">
    <h1>Intersection Observer Example</h1>
    <div id="target"></div>
  </div>

  <script>
    // 创建一个 IntersectionObserver 实例
    let observer = new IntersectionObserver(
      (entries, observer) => {
        entries.forEach(entry => {
          console.log(`entry===>`, entry.target.id);
          if (entry.isIntersecting) {
            // 当目标元素进入视口时执行的操作
            console.log('目标元素已进入视口');
          } else {
            // 当目标元素离开视口时执行的操作
            console.log('目标元素已离开视口');
          }
        });
      },
      { threshold: 0.5, root: document.getElementById('IntersectionObserverEntry-Area') }
    ); // 设置交叉比例为 50%

    // 需要监视的目标元素
    let targetElement = document.querySelector('#target');

    // 开始观察目标元素
    observer.observe(targetElement);
  </script>
</body>
</html>

IntersectionObserver监听简单示例

💬 COMMENT

👋友