IntersectionObserver“标准”和element.scrollIntoView

Question

[根据我的经验，通过Edge，IntersectionObserver回调收到的“目标”已设置为新滚动的元素，而不是（如Chrome和Firefox）仍设置为开始滚动的元素。我使用较小的阈值玩游戏，但可悲的是，我的功能认为滚动捕捉不足，因此不必担心更改当前图像标记点。

我也在研究Firefox的其他问题：-(

除了在滚动事件后等待'n'纳秒，还有更好的方法来了解您的旋转木马在哪里吗？

猜猜我只是将“ IF”取出来，看看我是否可以解决FF。编辑：Firefox似乎只允许我为我的路口观察员观察2个元素。我是否必须为每个要观察的元素重新创建一个单独的IntersectionObserver对象？

        carousel = document.getElementById("carousel");
        let observerOptions = {
            root: carousel,
            rootMargin: "0px",
            threshold: [0.0, 0.2, 0.4, 0.6, 0.8, 1.0]
        };

        bannerObserver = new IntersectionObserver(imageScrolled, observerOptions);
        for (let i = 0; i < 5; i++) {
            bannerObserver.observe(document.getElementById("d" + i));
        }


    function imageScrolled(divContainers) {
        divContainers.some(function (imgContainer, containerIndex) {
            let targetDiv = imgContainer.target;
            if (imgContainer.intersectionRatio > 0.5) {
                if (targetDiv.dataset.imgId != currDot) {
                    clearTimeout(bannerLoop);
                    dots[currDot].style.backgroundColor = "";
                    currDot = targetDiv.dataset.imgId;
                    dots[currDot].style.backgroundColor = DOT_COLOR;
                    bannerLoop = setTimeout(scrollBanner, bannerInterval);
                    return true;
                }
            }
        });
    }

Answer 1

IntersectionObserver当前太不可靠/不一致，所以我参加了一个简单的onscroll事件：-