Javascript 每页进行多个视口检查

我正在使用一个脚本来计算从0到实际值的数字。 要启动计数器，我希望元素位于视口的可见区域中

我找到了一个检查元素是否在可见区域的解决方案。 但是，如果我在页面的不同区域使用多个数字元素，这就不起作用了。它统计具有相同类的每个元素（

.counter

）

如果我用不同的名称使用计数器脚本两次，那么第二个版本不起作用，第一个版本在scroll上不起作用。只有当我在pageload的可见区域中有计数器时

这是我的计数器代码：

$('.counter').each(function() {
    var $this = $(this),
    countTo = $this.attr('data-count');

    $({ countNum: $this.text()}).animate({
        countNum: countTo
    },

    {
        duration: 2000,
        easing:'linear',
        step: function() {
            $this.text(Math.floor(this.countNum));
        },
        complete: function() {
            $this.text(this.countNum);
        }

    });

});

这就是我尝试过的解决方案（每页一次）：

在这里，您可以找到对整个代码的篡改：

这是检查我是否滚动到元素的代码（参见上面的链接答案）：

函数是crolledintoview（elem）
{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemBottom=docViewTop））；
}
函数Utils（）{
}
Utils.prototype={
构造函数：Utils，
IsElementView:函数（元素，FullyView）{
var pageTop=$（window.scrollTop（）；
var pageBottom=pageTop+$（窗口）.height（）；
var elementTop=$（element）.offset（）.top；
var elementBottom=elementTop+$（element）.height（）；
if（fullyInView==true）{
返回（（pageTopelementBottom））；
}否则{
返回（（elementTop=pageTop））；
}
}
};
var Utils=新Utils（）；

您只需检查一次IsElementView，而不是单独检查每个元素。当然，它会启动所有计数器

var isElementInView = Utils.isElementInView($('.counter'), false);
if (isElementInView) {
            $('.counter').each(function() {

将其移动到

中。每个
功能将分别适用于每个计数器

$('.counter').each(function() {
                var $this = $(this),
                countTo = $this.attr('data-count');
                var isElementInView = Utils.isElementInView($this, false);
                if (isElementInView) {
                // do animation

如果希望在滚动时发生这种情况，则需要在每次滚动时执行代码的页面中添加EventListener：

好的，谢谢。现在，它可以工作，但仅当计数器位于页面加载的可见区域时。当我滚动到计数器时，它停留在0。您的评论描述了您需求的第一行（在问题中）-您需要检查window/div scroll事件（对其进行解块并检查是否已启动）-而不是一次只检查一次startup@Cray因为它在页面加载时只执行一次。我在编辑答案时引用了滚动事件监听器。我想我用的是类似的东西。请参见上面我的问题中的我的编辑。如果只有一个计数器，则此方法有效。您的util只需在执行时检查元素是否在视图中。它不会永久地检查它。我将在答案中添加事件侦听器代码。
$('.counter').each(function() {
                var $this = $(this),
                countTo = $this.attr('data-count');
                var isElementInView = Utils.isElementInView($this, false);
                if (isElementInView) {
                // do animation

function checkForVisible(){
    $('.counter').each(function() {
                var $this = $(this),
                countTo = $this.attr('data-count');
                var isElementInView = Utils.isElementInView($this, false);
                if (isElementInView) {
                // etc code
}

var ticking = false;
window.addEventListener('scroll', function(e) {
  if (!ticking) {
    window.requestAnimationFrame(function() {
      checkForVisible();
      ticking = false;
    });
    ticking = true;
  }
});