Javascript IntersectionObserver+；滚动事件侦听器

我将IntersectionObserver与scroll eventListener混合使用。 只是解释一下：该函数基于滚动位置设置CSS变量的动画

为了防止每次滚动时浏览器启动，即使我不在元素附近，我也会这样做：

if (entry.isIntersecting) {
  window.addEventListener('scroll', moduleAnimation, true);
} else {
  window.removeEventListener('scroll', moduleAnimation, true);
}

我希望函数模块动画仅在条目相交时才收听滚动它工作正常，除了

removeEventListener

我做错了什么？：）

非常感谢

编辑：以下是我的完整功能：

    function stickyModule() {
    document.querySelectorAll('.full-module__img').forEach(function (module) {
        new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {

                let textOffset = module.parentElement.querySelector('.full-module__copy-wrapper').offsetTop;
                module.parentElement.parentElement.style.setProperty('--offsetWrapper', textOffset + "px");

                function moduleAnimation() {
                    console.log('scroll event');
                    let targetBrightness = 0.2;
                    let targetGrayscale = 1;
                    let targetContrast = 1.2;
                    let ImgDistFromTopDoc = Math.floor(module.parentElement.getBoundingClientRect().top + window.pageYOffset);
                    let toScroll = (window.pageYOffset - ImgDistFromTopDoc) / (module.offsetHeight - textOffset);
                    let scrollGrayscale = toScroll * targetGrayscale;
                    let scrollBrightness = 1 - toScroll * (1 - targetBrightness);
                    let scrollConstrast = 1 + toScroll * (targetContrast - 1);
                    if (toScroll < 0) {
                        module.style.setProperty('--grayscale', "0")
                        module.style.setProperty('--brightness', "1")
                        module.style.setProperty('--contrast', "1")
                    } else if (toScroll < 1 && toScroll > 0) {
                        module.style.setProperty('--grayscale', scrollGrayscale.toFixed(2))
                        module.style.setProperty('--brightness', scrollBrightness.toFixed(2))
                        module.style.setProperty('--contrast', scrollConstrast.toFixed(2))
                    } else if (toScroll > 1) {
                        module.style.setProperty('--grayscale', targetGrayscale)
                        module.style.setProperty('--brightness', targetBrightness)
                        module.style.setProperty('--contrast', targetContrast);
                    }
                }
                window.scrollTo(window.scrollX, window.scrollY + 1);
                window.scrollTo(window.scrollX, window.scrollY - 1);

                if (entry.isIntersecting) {
                    window.addEventListener('scroll', moduleAnimation, true);
                    window.addEventListener('resize', moduleAnimation, true);
                    console.log('if');
                }
                else{
                    window.removeEventListener('scroll', moduleAnimation, true);
                    console.log('else');
                }
            });
        }).observe(module);
    })
} 
    document.addEventListener('DOMContentLoaded', stickyModule);

函数stickyModule（）{
document.querySelectorAll（'.full-module__img'）.forEach（函数（模块）{
新的IntersectionObserver（（条目，观察者）=>{
entries.forEach（entry=>{
设textOffset=module.parentElement.querySelector（'.full-module\uuuu copy-wrapper'）.offsetTop；
module.parentElement.parentElement.style.setProperty（'--offsetWrapper'，textOffset+“px”）；
函数模块映像（）{
log（“滚动事件”）；
设targetBrightness=0.2；
设targetGrayscale=1；
设targetContrast=1.2；
让ImgDistFromTopDoc=Math.floor（module.parentElement.getBoundingClientRect（）.top+window.pageYOffset）；
让toScroll=（window.pageYOffset-ImgDistFromTopDoc）/（module.offsetHeight-textcoffset）；
让scrollGrayscale=toScroll*targetGrayscale；
设scrollBrightness=1-toScroll*（1-targetBrightness）；
让scrollConstrast=1+toScroll*（targetContrast-1）；
如果（toScroll<0）{
module.style.setProperty（'--grayscale'，“0”）
module.style.setProperty（'--brightness'，“1”）
module.style.setProperty（'--contrast'，“1”）
}否则如果（toScroll<1&&toScroll>0）{
module.style.setProperty（'--grayscale'，scrollGrayscale.toFixed（2））
module.style.setProperty（'--brightness'，scrollBrightness.toFixed（2））
module.style.setProperty（'--contrast'，scrollConstrast.toFixed（2））
}否则如果（toScroll>1）{
module.style.setProperty（'--grayscale'，targetGrayscale）
module.style.setProperty（'--brightness'，targetBrightness）
module.style.setProperty（'--contrast'，targetContrast）；
}
}
scrollTo（window.scrollX，window.scrollY+1）；
scrollTo（window.scrollX，window.scrollY-1）；
if（输入。isIntersecting）{
window.addEventListener（'scroll'，moduleImation，true）；
window.addEventListener（'resize'，moduleImation，true）；
console.log（'if'）；
}
否则{
removeEventListener（'scroll'，moduleAnimation，true）；
console.log（'else'）；
}
});
}).观察（模块）；
})
} 
document.addEventListener（'DOMContentLoaded'，stickyModule）；

---

我对JS有点陌生抱歉如果我的代码看起来很疯狂哈哈

你必须在

removeEventListener

中使用与你在

addEventListener

中使用的完全相同的函数。同样的定义是不够的

在您的示例中，每次观察者触发时，您都会为每个条目重新生成

moduleImation

。它看起来是同一个函数，但它是一个全新的函数，具有相同的名称和定义。相反，您可以将函数声明移到观察者回调之外

函数stickyModule（）{
document.querySelectorAll（'.full-module__img'）.forEach（函数（模块）{
函数模块映像（）{
log（“滚动事件”）；
}
新的IntersectionObserver（（条目，观察者）=>{
entries.forEach（entry=>{
console.log（'entry'，entry.isIntersecting）
if（输入。isIntersecting）{
window.addEventListener（'scroll'，moduleImation，true）；
console.log（'if'）；
}否则{
removeEventListener（'scroll'，moduleAnimation，true）；
console.log（'else'）；
}
});
}).观察（模块）；
})
} 
document.addEventListener（'DOMContentLoaded'，stickyModule）
正文{
高度：200vh；
}
您能否创建一个新的解决方案，以便我们能够体验并重新创建该问题。这可能是帮助您解决问题所必需的，因为您提供的代码没有显示任何明显的问题。您的代码似乎正在“工作”，在元素进入和离开视口时添加和删除事件侦听器。当事件侦听器被删除时，您希望发生什么？没关系，我复制了它。我非常确定您也可以使用单个观察者来完成此操作，而不是每个图像一个观察者，但这有点超出了您要寻找的范围。这正是我要寻找的。愚蠢的错误！非常感谢你的清楚解释！！