Intersection Observer异常：is-visible类触发时机不符

你遇到的异常是两处实现疏漏叠加导致的，确实是基础配置环节的遗漏：

• 回调逻辑完全缺失状态判断
  IntersectionObserver的回调会在观察目标「进入视口、离开视口」两种状态切换时都触发，传入的entry对象自带isIntersecting属性，用来标记当前目标是处于视口交叉范围内还是外。
  你当前的代码没有针对状态做分支判断，直接对目标执行classList.toggle('is-visible')，流程完全错位：元素第一次碰到视口边界、触发进入状态回调时会给元素加上is-visible；等元素完全滚出视口、触发离开状态回调时，又会执行一次toggle，把刚加上的类删掉。这就是你观察到的「类提前添加、滚远了类反而消失」的直接原因。
• 几何边界与视觉位置的偏差导致提前触发
  你给入场元素设置了初始样式transform: translateY(4em)，这个样式只会改变元素的视觉渲染位置，不会改变元素在文档流里的实际几何边界。而IntersectionObserver计算交叉状态时，用的是元素的原始几何边界，不是transform偏移后的视觉位置。
  等于元素的实际几何框已经触碰到视口边界的时候，它的视觉位置还被向下推了4em，还没进入用户可见的视口范围，这时候就已经触发状态切换、加上了is-visible，也就是你感知到的“元素还没进视口类就提前加上了”。

1. 调整回调逻辑：不再无差别切换类，只有当entry.isIntersecting为真（元素确实进入视口范围）时，才给目标加is-visible类；如果希望入场动画只触发一次，在加完类后直接调用observer.unobserve(entry.target)停止对该元素的观察，避免后续滚动触发不必要的状态变更。
2. 补全观察器基础配置：根据实际触发需求，自定义threshold和rootMargin，抵消transform带来的视觉位置偏移，避免触发时机提前。

// Intersection observer 修正版
const observerOptions = {
    root: null, // 以浏览器视口为交叉判断的根元素
    threshold: 0.2, // 元素有20%面积进入视口才触发回调
    rootMargin: '0px 0px -50px 0px' // 将视口判断区域的底部向上收缩50px，抵消位移带来的提前触发
}
const callback = function (entries, observer) {
    entries.forEach(entry => {
        // 仅当元素进入视口时，添加类激活入场动画
        if (entry.isIntersecting) {
            entry.target.classList.add('is-visible');
            // 动画触发完成后停止观察该元素，避免离开视口时类被误删
            observer.unobserve(entry.target);
        }
    })
}
const observer = new IntersectionObserver(callback, observerOptions);
const targets = document.querySelectorAll('.show-onscroll');
targets.forEach(target => {
    observer.observe(target);
})

补充说明：你现有CSS逻辑不需要做修改，JS逻辑修正后，类的添加时机就会完全匹配预期——元素真正滚动到视觉上的可见范围时才会触发入场动画，动画触发后不会因为滚动离开视口就重置状态。

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