素材菌 使用IntersectionObserver的rootMargin要注意了
rootMargin 设置不一定会有效，有效的几个情况如下：
1.设置了 overflow 的父级节点+rootMargin，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试 IntersectionObserver</title>
<style>
html,
body {
width: 100%;
height: 100%;
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
box-sizing: border-box;
/* overflow-x: auto; */
}
.container {
margin: auto;
width: calc(100% - 100px);
height: 500px;
border: 1px solid red;
overflow-x: auto;
}
.list {
width: 200vw;
height: 500px;
border: 1px solid blue;
box-sizing: border-box;
padding-left: 100px;
}
.listItem {
width: 100px;
height: 100px;
background: white;
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="list" id="list">
<div class="listItem" id="listItem"></div>
</div>
</div>
<script>
let callback = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log("出现");
} else {
console.log("消失");
}
});
};
let options = {
root: document.querySelector("#container"), // root 为 container 时 rootmargin 生效
// root: null, // root 为 null 时 rootmargin 不生效
rootMargin: "0px 50px",
threshold: 0,
};
let observer = new IntersectionObserver(callback, options);
let target = document.querySelector("#listItem");
observer.observe(target);
</script>
</body>
</html>
2.如果不设置 root，即想要交叉对象是窗口的时候，需要去除滚动的父级节点，将 html、body 的 overflow 也去除（也去除的意思是不要设置），如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试 IntersectionObserver</title>
<style>
html,
body {
width: 100%;
height: 100%;
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: auto;
width: calc(100% - 100px);
height: 500px;
border: 1px solid red;
overflow-x: auto;
}
.list {
width: 200vw;
height: 500px;
border: 1px solid blue;
box-sizing: border-box;
padding-left: 100px;
}
.listItem {
width: 100px;
height: 100px;
background: white;
}
</style>
</head>
<body>
<div class="list" id="list">
<div class="listItem" id="listItem"></div>
</div>
<script>
let callback = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log("出现");
} else {
console.log("消失");
}
});
};
let options = {
root: null, // root 为 null 时 rootmargin 不生效
rootMargin: "0px 50px",
threshold: 0,
};
let observer = new IntersectionObserver(callback, options);
let target = document.querySelector("#listItem");
observer.observe(target);
</script>
</body>
</html>
3.如果不需要 rootMargin 或者 rootMargin 为 0，那都是可以的，不需要额外的注意。
微信
支付宝声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
码云笔记 » 使用IntersectionObserver的rootMargin要注意了
码云笔记 » 使用IntersectionObserver的rootMargin要注意了
