JS中怎么监听html标签由不可见变为可见
时间: 2023-05-24 10:07:13 浏览: 164
可以使用IntersectionObserver来监听HTML元素的可见性变化。IntersectionObserver是一个新的API,可以用来异步观察目标元素与祖先元素或顶级文档视窗(viewport)交叉的变化。
以下是一个示例代码:
```javascript
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 目标元素进入视窗,此时为可见状态
console.log('Element is visible.')
// 执行需要的操作
} else {
// 目标元素离开视窗,此时为不可见状态
console.log('Element is not visible.')
// 执行需要的操作
}
})
})
const target = document.querySelector('#target')
observer.observe(target)
```
在上面的代码中,首先实例化了一个IntersectionObserver对象,并传入了一个回调函数。回调函数的参数为一个IntersectionObserverEntry对象的数组,每个对象表示一个目标元素的交叉状态。
然后,通过调用observer对象的observe()方法,将目标元素(id为target)传入,开始观察其可见性变化。当目标元素进入或离开视窗时,回调函数会被自动触发,并执行相应的操作。
需要注意的是,IntersectionObserver是一个比较新的API,如果需要在老的浏览器中使用,可能需要使用Polyfill库进行兼容处理。