第一种方法:
在网上搜索怎么判断元素是否在浏览器窗口内,先后发现了API IntersectionObserver 和getBoundingClientRect 。
使用IntersectionObserver 监控多个元素。
let options = {
threshold:[0,0.1,0.2,0.25,0.5,0.75,0.8,0.9,1]
}
const intersectionObserver = new IntersectionObserver((entries) => {
if (entries[0].intersectionRatio <= 0){
// 视图外
}else{
// 视图内
}
},options);
$("observerElment").each(function(){
intersectionObserver.observe(this)
})
⚠️ options 很重要,如果先后有2个元素,一个离开视图,一个已进来视图一会儿。 离开视图会触发< 0的函数,然后造成本来该在视图内的逻辑,变成了视图外的逻辑。options就可以过一会儿就调用一次,变成视图外的逻辑,会因为视图内的函数触发改为视图内的逻辑。
第2种方法:
getBoundingClientRect
未完待续。。。