本文通过实例代码介绍了如何使用JavaScript来判断DOM元素是否在视图内，包括两种方法：一种是基于元素的边界信息判断；另一种是利用Intersection Observer API进行实时监控元素是否在视图范围内。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.item {
width: 100%;
height: 200px;
border: 1px solid red;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="item" data-color="red">1</div>
<div class="item" data-color="yellow">2</div>
<div class="item" data-color="blue">3</div>
<div class="item" data-color="green">4</div>
<div class="item" data-color="black">5</div>
<div class="item" id="item-6" data-color="orange">6</div>
<script>
// 方法一
function isInner(element) {
let client = element.getBoundingClientRect();
let top = client.top;
let left = client.left;
let bottom = client.bottom;
let right = client.right;
if (
top > 0 &&
left > 0 &&
right < (window.innerWidth || document.documentElement.clientWidth) &&
bottom < (window.innerHeight || document.documentElement.clientHeight)
) {
console.log("element is inner");
} else {
console.log("element is out");
}
}
const dom = document.getElementById("item-6");
isInner(dom);
function callback(entry, observer) {
console.log(
"🚀 ~ file: 判断节点是否在视图内.html:47 ~ callback ~ entry:",
entry
);
if (entry[0].intersectionRatio > 0) {
console.log("dom inner");
} else {
console.log("dom outer");
}
}
// const observer = new IntersectionObserver(callback);
// observer.observe(dom);
// 方法二
const colors = ["red", "yellow", "green", "blue", "black", "orange"];
function handItem(entry, observer) {
for (let i = 0; i < entry.length; i++) {
if (entry[i].intersectionRatio > 0) {
console.log("dom inner", entry[i].target.dataset["color"]);
entry[i].target.style.backgroundColor =
entry[i].target.dataset["color"];
console.log(i);
observer.unobserve(entry[i].target);
}
}
}
const observer2 = new IntersectionObserver(handItem);
const domArr = document.querySelectorAll(".item");
for (let i = 0; i < domArr.length; i++) {
observer2.observe(domArr[i]);
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
