寂寞如花 使用IntersectionObserver的rootMargin要注意了
AI 概述
rootMargin 设置不一定会有效，有效的几个情况如下：
1.设置了 overflow 的父级节点+rootMargin，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试 IntersectionObserver</title&...
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要注意了的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 使用IntersectionObserver的rootMargin要注意了
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 使用IntersectionObserver的rootMargin要注意了
