javascript - IntersectionObserver“标准”和element.scrollIntoView

根据我的经验，通过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;
                }
            }
        });
    }

最佳答案

目前，IntersectionObserver过于不可靠/不一致，因此我参加了一个简单的onscroll事件：-

    function onTheMove(e) {
        for (let i=0; i < e.srcElement.children.length; i++) {
            if (e.srcElement.scrollLeft == e.srcElement.children[i].dataset.imgId * e.srcElement.children[i].clientWidth) {
                if (e.srcElement.children[i].dataset.imgId != currDot) {
                    clearTimeout(bannerLoop);
                    dots[currDot].style.backgroundColor = "";
                    currDot = e.srcElement.children[i].dataset.imgId;
                    dots[currDot].style.backgroundColor = DOT_COLOR;
                    bannerLoop = setTimeout(scrollBanner, bannerInterval);
                    break;
                }
            }
        }
    }

caniuse.com在这一点上是错误的:-(