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，那都是可以的，不需要额外的注意
Vue 实现点击空白处隐藏某节点（三种方式：指令、普通、遮罩）
在项目中往往会有这样的需求： 弹出框（或Popover）在 show 后，点击空白处可以将其 hide。 针对此需求，整理了三种实现方式，大家按实际情况选择。我们做项目肯定会用到 UI 框架，常见的 Element 中的组件提供了这样的方法
JavaScript中如何添加文本节点？
在javascript中提供了很多操作DOM文档的方法，当然也包括创建一个节点，下面我们来看一下JavaScript如何创建一个创建一个文本节点（text）。
一个 Vue 模板可以有多个根节点(Fragments)?
如果我们试图创建一个没有根节点的Vue模板，比如这样：通常，我们通过在最外层包裹一层 div 来解决这个问题，但这个div元素一般没有啥使用，就是让模板符合单根需求。
Js中nodevalue返回的是什么？
在JavaScript中，nodeValue属性用于根据节点的类型设置或返回节点的值，该属性的值取决于节点的类型（nodeType）。下面本篇文章就来给大家介绍一下nodeValue属性，希望对大家有所帮助。
nodetype中值1、2、3分别代表什么意思
JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享相同的基本属性和方法。每个节点都有一个nodeType属性，用于表明节点的类型。
Vue3中的teleport节点传送
Vue3中的teleport API极大方便了在Vue3业务逻辑中操作移动Dom位置。当teleportToTarget 为#idTest时,节点会被传输到 #idTest 节点中，等同于
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!