IntersectionObserver "standards" 和 element.scrollIntoView

Question

根据我的经验，对于 Edge，您的 IntersectionObserver 回调收到的 "target" 已设置为新滚动的元素，而不是（如 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 目前太unreliable/inconsistent 所以我做了一个简单的滚动事件：-

    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 这个是错误的:-(

IntersectionObserver "standards" 和 element.scrollIntoView

IntersectionObserver "standards" and element.scrollIntoView

javascript

css

firefox

scroll

intersection-observer