与 IntersectionObserver API 的行为不一致

Question

我需要在网页上显示多个动画计数器，当元素基于 IntersectionObserver API [=38] 相交时触发动画=].

我观察到的是，尽管 API return 大多数情况下所有计数器都为真，但只有第一个动画被执行，其余的动画我需要滚动页面 up/down 以使其余计数器具有动画效果。

即使我只需要用数据属性中的值替换内部文本，这种不一致的行为仍然成立（这样做是为了验证动画脚本不是罪魁祸首）。

下面是单个网页上 3 个计数器的代码和屏幕截图，即使所有三个计数器都在屏幕的第一个折叠内，只有第一个有效。

HTML:

<div class="counter-value" data-count="10000">0</div>
<div class="counter-value" data-count="183.4">0</div>
<div class="counter-value" data-count="270">0</div>

JS:

var config = {
    root: null,
    rootMargin: '0px',
    threshold: 0.5
};

function callback(entry, observer){
    console.log(entry);
    if (entry[0].isIntersecting) {

        var $this = $(entry[0].target),
            countTo = $this.attr('data-count');

        $this.prop({
            countNum: $this.text()
        }).animate({
            countNum: countTo
        },
        {
            duration: 1000,
            easing: 'swing',
            step: function () {
                $this.text(Math.floor(this.countNum));
            },
            complete: function () {
                var localNum = this.countNum.toLocaleString()
                $this.text(localNum);
                console.log(localNum);
            }
        });
        observer.unobserve(entry[0].target);
    };
};

var observer = new IntersectionObserver(callback,config);
var counters = document.querySelectorAll('.counter-value'); //make this an array if more than one item
counters.forEach(counter => {
    observer.observe(counter);
});

如果您以前遇到过此类问题，有什么建议吗？

Answer 1

Intersection Observer API 接受一个回调，该回调将第一个参数设置为 all 附加到观察者的条目。你必须遍历所有这些并检查它们是否相交。

function callback(entries, observer){
  entries.forEach(entry => {
    if (entry.isIntersecting) {

        var $this = $(entry.target),
            countTo = $this.attr('data-count');

        $this.prop({
            countNum: $this.text()
        }).animate({
            countNum: countTo
        },
        {
            duration: 1000,
            easing: 'swing',
            step: function () {
                $this.text(Math.floor(this.countNum));
            },
            complete: function () {
                var localNum = this.countNum.toLocaleString()
                $this.text(localNum);
                console.log(localNum);
            }
        });
        observer.unobserve(entry.target);
    }
  }
};

与 IntersectionObserver API 的行为不一致

Inconsistent behaviour with IntersectionObserver API

javascript

intersection-observer