IntersectionObserver监听简单示例
Sonder
2023-12-07
2845字
7分钟
浏览 (749)
<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>