前端 指定一个dom ,当他出现在屏幕中时执行一个函数,当他离开这个dom时执行另一个函数
时间: 2024-02-27 20:51:21 浏览: 46
你可以使用 Intersection Observer API 来监听 DOM 元素的可见性。具体步骤如下:
1. 获取需要监听的 DOM 元素,并创建一个 IntersectionObserver 实例:
```javascript
const targetElement = document.querySelector('#target-element');
const observer = new IntersectionObserver(entries => {
// 处理交叉观察器的回调
});
```
2. 监听 DOM 元素的可见性:
```javascript
observer.observe(targetElement);
```
3. 处理交叉观察器的回调,根据元素的可见性执行不同的函数:
```javascript
const onVisible = () => {
// 元素可见时执行的函数
};
const onHidden = () => {
// 元素不可见时执行的函数
};
const callback = (entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
onVisible();
} else {
onHidden();
}
});
};
const observer = new IntersectionObserver(callback);
```
这样,当目标元素进入或离开视窗时,就会分别执行 onVisible 和 onHidden 函数。