交叉观察器和counter.js并非每次都触发

问题描述

我在交叉路口有问题

const Boxes1 = document.querySelectorAll('.anim');

observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {
        if(entry.isIntersecting == true) {            
            entry.target.style.animation = `anim1 .5s ${entry.target.dataset.delay} ease-out forwards `;
                jQuery(".sub-player-count").counter({
                autoStart:true,// true/false,default: true
                duration: 3000,// milliseconds,default: 1500
                countFrom: 0,// start counting at this number,default: 0
                countTo: 4008,// count to this number,default: 0
                runOnce:false,// only run the counter once,default: false
                easing:"eaSEOutCubic",// easing effects
                onStart:function() {},// callback on start of the counting
                onComplete:function() {
                },// callback on completion of the counting
                });
            console.log(entry);

            }
        else{
            entry.target.style.animation = 'none';
            jQuery('.anim').css('opacity','0');
            
            }
        })
    
});


Boxes1.forEach(entry => { 
    observer.observe(entry);
});

我正在使用https://github.com/tombruijn/counter.js?files=1中的counter.js。

这是我的代码,用于在某些div出现时为它们设置动画。

我遇到2个问题:

  1. 只要页面立即加载,而不是当div进入视图时,计数就会开始。

  2. 当我滚动然后返回时,计数器不会再次启动。

我如何使它工作,以使计数器仅在将div滚动到视图中时才启动,并在我滚动出然后返回时再次启动?

预先感谢, 亚伦

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)