首页
归档
笔记
树洞
搜索
友言

文章详情

Interesting People Record Interesting.

/ JavaScript / 文章详情

IntersectionObserver监听简单示例

Sonder
2023-12-07
2845字
7分钟
浏览 (812)

复制代码
<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代码:

复制代码
<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>
下一篇 / 使用scss简化媒体查询

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)