IntersectionObserver添加类/样式后无法识别Entry问题排查

可正常运行的代码 #

控制台能输出entry from above：

let count = 0;

const stickyElementsObserver = new IntersectionObserver((entries) =>{
entries.forEach((entry)=>{
    if(entry.isIntersecting){
        console.log('entry : ', entry.target.id);
        
        
        if(entry.target.id === 'parfum'){
            if(count===0){
                title.classList.add('opacityZero');
                /*entry.target.classList.add('scaleUp');*/
                count = count + 1;
                
            }else if(count > 0){
                    title.classList.remove('opacityZero');
                    
                        console.log('-- entry from above --');
                        count = 0;
            }
        }
        
        

    }
});
},{rootMargin: "0px 0px -300px 0px", threshold: 1.0});

argumentsElem.forEach((el)=>stickyElementsObserver.observe(el));

无法正常运行的代码 #

添加scaleUp类的放大效果生效，但控制台无法输出entry from above，后续关联事件也无法触发：

let count = 0;

const stickyElementsObserver = new IntersectionObserver((entries) =>{
entries.forEach((entry)=>{
    if(entry.isIntersecting){
        console.log('entry : ', entry.target.id);
        
        
        if(entry.target.id === 'parfum'){
            if(count===0){
                title.classList.add('opacityZero');
                entry.target.classList.add('scaleUp');
                count = count + 1;
                
            }else if(count > 0){
                    title.classList.remove('opacityZero');
                    
                        console.log('-- entry from above --');
                        count = 0;
            }
        }
        
        

    }
});
},{rootMargin: "0px 0px -300px 0px", threshold: 1.0});

argumentsElem.forEach((el)=>stickyElementsObserver.observe(el));

现象与问题根源 #

最初误以为IntersectionObserver无法识别被动态添加CSS类的目标元素，实际根源是：监听对象错误选择了外层div容器而非内部目标元素。由于div容器高度与目标元素不一致，添加scaleUp类放大整个div后，容器无法滚动出IntersectionObserver的交叉区域，导致后续回调无法触发。

解决方法与优化建议 #

• 问题解决：将IntersectionObserver的监听对象修改为目标元素而非外层div容器，即可正常触发预期的回调输出。
• 优化建议：当前仍存在滚动速度过快时的小bug，建议减少IntersectionObserver实例数量，同时简化关联的DOM修改和动画效果，以此提升客户端运行性能与用户体验。

内容的提问来源于stack exchange，提问作者Fefe