IntersectionObserver “标准”和 element.scrollIntoView答案

【问题标题】：IntersectionObserver "standards" and element.scrollIntoViewIntersectionObserver “标准”和 element.scrollIntoView
【发布时间】：2019-11-22 07:43:56
【问题描述】：

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

【问题讨论】：

标签： javascript css firefox scroll intersection-observer

【解决方案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 在这个问题上是错误的 :-(

【讨论】：