Question

我有运行计数器的代码，从0向上计数到HTML标记内的文本所定义的数字。效果很好-我使用该类有四个元素，并且在页面加载时每个元素将从0开始计数。

但是棘手的是我希望各个元素在每个元素出现时都开始计数。

我发现滚动时计数器一直在重新启动。我尝试使用附加到.one()事件处理程序的jQuery .scroll()方法，但是我需要不断检查元素可见的条件是否得到满足，这就是我要来的地方松开。

这就是我所拥有的：

$(window).on('scroll',function(e) {
    $('.count').each(function(i) {      
        var topOfElement = $(this).offset().top;
        var bottomOfWindow = $(window).scrollTop() + $(window).height();

        if (bottomOfWindow > topOfElement) {
            $(window).one('scroll',function(e) {    
                $(this).prop('Counter',0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 2000,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
            });
        }
    });
});

以及简单的HTML：

<span class="count">4143</span>
<span class="count">920</span>
<span class="count">5112</span>
<span class="count">76</span>

我收到“无法读取未定义的属性'createDocumentFragment'”的错误。

Answer 1

滚动中的this是窗口元素。

$('.count').each(function(i) {      
  var elem = $(this);
  ...
  if (bottomOfWindow > topOfElement) {
    $(window).one('scroll',function(e) {
      $(elem).prop('Counter',0).animate({
        ...

Answer 2

正如epascarello所指出的，您要在每个.scroll事件上重新绑定.scroll事件。您只需要一个绑定。

但是，您还需要一种方法来识别启动了计数过程，并且无需再次运行该过程。简单的方法是在元素中添加一个类。

我也没有看到您是如何从span标签中获取maxcount值的。

$(window).on('scroll',function(e) {
    $('.count').each(function(i, e) {      
        var topOfElement = $(e).offset().top;
        var bottomOfWindow = $(window).scrollTop() + $(window).height();

        if (bottomOfWindow > (topOfElement + 80)) {
        //debugger;
            if ( !$(e).hasClass('done') ){
                $(e).addClass('done');
                
                let maxcnt = $(e).text();
                maxcnt = parseInt(maxcnt);
                $(e).prop('Counter',0).animate({
                    Counter: $(e).text()
                }, {
                    duration: 2000,
                    easing: 'swing',
                    step: function (maxcnt) {
                        $(e).text(Math.ceil(maxcnt));
                    }
                });
            }
        }
    });
});

div{height:250px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div></div>
<span class="count">4143</span>
<div></div>
<span class="count">920</span>
<div></div>
<span class="count">5112</span>
<div></div>
<span class="count">76</span>
<div></div>

验证滚动条件是否满足，然后仅运行一次功能

2 个答案: