Intersection Observer滚动动画触发时机异常问题求助

我周末一直在研究Intersection Observer动画，想实现预期的滚动效果。按我的理解代码应该能正常运行，但实际不是这样🥲。

我的目标是：当元素到达视口内的特定位置（我用蓝色边框标记了触发点）时启动滚动动画；当元素移到该边框下方时停止动画。但现在动画在div一进入视口就启动了。

希望能得到帮助实现这个目标，也欢迎对我的动画实现方式提出批评或优化建议。

HTML代码 #

<div class="text">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
</div>

<div class="box">
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
    <div class="box-content"></div>
</div>

<div class="text">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita provident unde, sequi aliquid porro ipsa vitae nulla dolor neque aliquam quisquam nam magnam architecto, consequuntur est in beatae, nihil optio.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, architecto eveniet assumenda praesentium in laboriosam vitae atque, sunt minima aliquid quam distinctio voluptatum commodi veniam iure officia provident voluptas ea?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet quo commodi laborum perspiciatis nemo voluptates quod odio quis necessitatibus perferendis? Ipsum, quasi nesciunt. Debitis omnis consequuntur laboriosam veniam, non impedit!
</div>

CSS代码 #

body {
  position: relative;
}

body:after {
  content: '';
  position: fixed;
  bottom: 40%;
  height: 1px;
  width: 100%;
  border-bottom: 1px solid blue;
}

.text {
  background-color: brown;
  color: white;
  height: 150vh;
}

.box {
    display: flex;
    position: relative;
}

.box-content {
  width: 200px;
  height: 200px;
  background-color: greenyellow;
  margin-right: 50px;
}

JavaScript代码（原代码） #

const boxElement = document.querySelector(".box");

//this function calls the aniamtion function and observes the window scroll position
function getWindowScrollPos() {
    let windowPosition = window.scrollY;

    window.addEventListener("scroll", () => {
        windowPosition = window.scrollY;

        animateBox(boxElement, windowPosition);
    });
}

function animateBox(box, scrollPosition) {
    let boxOffsetPosition = scrollPosition;

    box.style.left = `${-boxOffsetPosition}px `;
}

function boxObserver(element) {
    const observer = new IntersectionObserver(
        (entries, observer) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    getWindowScrollPos();
                }
            });
        },
        { rootMargin: "0% 0% 60% 0%" }
    );

    observer.observe(element);
}

boxObserver(boxElement);

问题分析与解决方案 #

原代码存在的问题 #

1. Intersection Observer逻辑不完整：只处理了元素进入视口的情况，未处理离开触发区域的逻辑，导致动画无法停止；同时rootMargin设置未精准对应蓝色触发线位置。
2. 重复绑定scroll事件：每次触发getWindowScrollPos都会新增scroll监听，造成事件叠加，动画执行效率低下甚至出错。
3. 动画计算逻辑错误：直接用scrollY作为偏移量，未基于元素与触发线的相对位置计算，导致动画时机偏差。

修正后的代码 #

const boxElement = document.querySelector(".box");
let scrollHandler = null;

// 计算触发线的位置（视口底部40%对应顶部60%的位置）
const triggerLineY = window.innerHeight * 0.6;

function animateBox(box) {
    // 获取元素相对于视口的位置
    const boxRect = box.getBoundingClientRect();
    // 计算元素顶部到触发线的距离，作为偏移基准
    const offset = Math.max(0, triggerLineY - boxRect.top);
    box.style.left = `${-offset}px`;
}

function boxObserver(element) {
    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    // 仅绑定一次scroll事件
                    if (!scrollHandler) {
                        scrollHandler = () => animateBox(element);
                        window.addEventListener("scroll", scrollHandler);
                    }
                } else {
                    // 离开触发区域时移除监听，停止动画
                    if (scrollHandler) {
                        window.removeEventListener("scroll", scrollHandler);
                        scrollHandler = null;
                    }
                }
            });
        },
        {
            // 精准设置rootMargin，匹配蓝色触发线的触发范围
            rootMargin: `${-triggerLineY}px 0% ${window.innerHeight * 0.4}px 0%`,
            threshold: 0
        }
    );

    observer.observe(element);
}

boxObserver(boxElement);

优化说明 #

• 精准控制触发区域：通过视口高度计算触发线位置，设置对应rootMargin，确保Observer仅在元素到达蓝色线时触发。
• 避免重复绑定事件：用变量存储scroll事件句柄，确保只绑定一次，离开时及时移除，提升性能。
• 动画逻辑优化：基于元素与触发线的相对位置计算偏移量，动画更符合预期，不会出现偏移量异常增大的问题。

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