判断1个页面多个元素是否在视图内

231 阅读1分钟

第一种方法: 

在网上搜索怎么判断元素是否在浏览器窗口内,先后发现了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 

未完待续。。。