IntersectionObserver “標准”和 element.scrollIntoView

Question

根據我的經驗，使用 Edge 時，您的 IntersectionObserver 回調收到的“目標”已設置為新滾動的元素，而不是（如 Chrome 和 Firefox）仍然反映開始滾動的元素。 我使用了較小的閾值，但遺憾的是我的 function 認為滾動快照不足，因此不必費心更改當前的圖像標記點。

我也在研究 Firefox 的單獨問題：-(

除了在滾動事件后等待“n”納秒之外，還有更好的方法來了解您的輪播在哪里？

我想我會把“IF”拿出來看看我能不能修復FF。 編輯：Firefox 似乎只允許我為我的交叉點觀察者觀察 2 個元素。 我是否必須為每個被觀察的元素新建一個單獨的 IntersectionObserver object？

        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 事件：-

    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 在這個上是錯誤的:-(