使用translateX(-100%)时，JS Intersection Observer为何无法观测div？

问题根源：当元素设置transform: translateX(-100%)时，整个元素完全移出视口，Intersection Observer的threshold: 0.5要求元素有50%可见才能触发相交判定，自然无法满足触发条件，也就不会添加show类。

以下是两种可行解决方案：

方案一：调整Intersection Observer的检测范围 #

修改Observer的rootMargin参数，向左扩展检测区域，让元素还未完全进入视口时就被检测到：

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.classList.add('show');
        } else {
            entry.target.classList.remove('show'); 
        }
    });
}, {
    root: null,
    rootMargin: '0px 0px 0px -100%', // 向左扩展100%视口宽度的检测区域
    threshold: 0.1 // 元素10%进入扩展区域即触发
});

const targetElement = document.querySelector('.hidden');
if (targetElement) {
    observer.observe(targetElement);
}

rootMargin: '0px 0px 0px -100%'表示将视口的左侧检测边界向左延伸100%视口宽度，这样元素在从左侧滑入的过程中，还未完全进入原视口就会被检测到相交，触发类名添加。

方案二：修改初始隐藏的位移距离（可选） #

如果不想调整Observer参数，可以将初始位移改为非完全移出视口，同时降低threshold值，确保元素部分可见时触发：

.hidden{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-80%); /* 只移出80%视口宽度 */
    transition: all 1s ease;
}

// 调整threshold为0.2，元素20%可见时触发
const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.classList.add('show');
        } else {
            entry.target.classList.remove('show'); 
        }
    });
}, {
    root: null,
    rootMargin: '0px',
    threshold: 0.2
});

这种方法适合不需要完全移出视口的场景，但视觉效果会有细微差异。

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