const observer1 = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("animate"); } else { entry.target.classList.remove("animate"); } }); }, options1); const elements1 = document.querySelectorAll(".carn"); elements1.forEach((element) => { observer1.observe(element); });如何往上滚动不触发
时间: 2024-01-11 11:06:09 浏览: 13
在创建 `IntersectionObserver` 对象时,可以通过 `options` 参数来配置观察器的选项。其中有一个 `threshold` 选项,用于设置一个数组,表示当目标元素与视窗的交叉比率达到数组中的任意一个值时,就会触发回调函数。默认值为 `[0]`,表示当目标元素的任意部分进入视窗时就会触发回调函数。因此,如果要达到往上滚动不触发的效果,可以将 `threshold` 设置为一个小于等于 `0` 的值,例如 `[0, -0.1]`,表示当目标元素完全离开视窗时才会触发回调函数。
修改上述代码如下:
```javascript
const options1 = {
threshold: [0, -0.1] // 设置 threshold 为 [0, -0.1]
};
const observer1 = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("animate");
} else {
entry.target.classList.remove("animate");
}
});
}, options1);
const elements1 = document.querySelectorAll(".carn");
elements1.forEach((element) => {
observer1.observe(element);
});
```
这样,当目标元素完全离开视窗时,就会触发回调函数,并且往上滚动不会触发。