jQuery动画反击，但会自动在移动视图上工作

Question

我正在为网站建立柜台。它可以完美地工作，但在移动视图中，它不等待使用户进入它。在计算机视图上，当用户看到它时，它始于。但是在移动视图中，它会自动启动，因此在用户看到它之前结束。有什么想法吗？

$(document).ready(function($) {
    //Check if an element was in a screen
    function isScrolledIntoView(elem){
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom <= docViewBottom));
    }
    //Count up code
    function countUp() {
        $('.counter').each(function() {
          var $this = $(this), // <- Don't touch this variable. It's pure magic.
              countTo = $this.attr('data-count');
              ended = $this.attr('ended');

        if ( ended != "true" && isScrolledIntoView($this) ) {
            $({ countNum: $this.text()}).animate({
            countNum: countTo
          },
          {
            duration: 5000, //duration of counting
            easing: 'swing',
            step: function() {
              $this.text(Math.floor(this.countNum));
            },
            complete: function() {
              $this.text(this.countNum);
            }
          });
        $this.attr('ended', 'true');
        }
        });
    }
    //Start animation on page-load
    if ( isScrolledIntoView(".counter") ) {
        countUp();
    }
    //Start animation on screen
    $(document).scroll(function() {
        if ( isScrolledIntoView(".counter") ) {
            countUp();
        }
    });
});

.counter-box h1 {
    font-size: 25px;
}
.counter-box h1 span {
    color: #ff9aa2;
}

.counter-box h4 {
  font-size: 20px;
  margin-bottom: 60px;
}

.counter-box i.fa {
    font-size: 30px;
    margin-bottom: 10px;
}

.counter-box p {
    font-size: 20px;
}

.counter-desc {
    font-size: 16px;
    opacity: 0.7;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row counter-box text-center">
<div class="col-12" style="margin-bottom: 15px;">
<h1>Sayılarla Türkiye'de <span style="color: #cc0000;">Test Sitesi</span></h1>
</div>
<div class="col-4 counterH"><i class="fa fa-code"></i>
<p><span class="counter" data-count="33">0</span>+</p>
<span class="counter-desc">Yıllık Hizmet</span></div>
<div class="col-4 counterH"><i class="fa fa-coffee"></i>
<p><span class="counter" data-count="18000">0</span>+</p>
<span class="couenter-desc">Çeşit Ürün</span></div>
<div class="col-4 counterH"><i class="fa fa-bug"></i>
<p><span class="counter" data-count="800">0</span>+</p>
<span class="counter-desc">Personel</span></div>
</div>
</div>

<script type="text/javascript">// <![CDATA[
$(document).ready(function($) {
    //Check if an element was in a screen
    function isScrolledIntoView(elem){
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom <= docViewBottom));
    }
    //Count up code
    function countUp() {
        $('.counter').each(function() {
          var $this = $(this), // <- Don't touch this variable. It's pure magic.
              countTo = $this.attr('data-count');
              ended = $this.attr('ended');

        if ( ended != "true" && isScrolledIntoView($this) ) {
            $({ countNum: $this.text()}).animate({
            countNum: countTo
          },
          {
            duration: 5000, //duration of counting
            easing: 'swing',
            step: function() {
              $this.text(Math.floor(this.countNum));
            },
            complete: function() {
              $this.text(this.countNum);
            }
          });
        $this.attr('ended', 'true');
        }
        });
    }
    //Start animation on page-load
    if ( isScrolledIntoView(".counter") ) {
        countUp();
    }
    //Start animation on screen
    $(document).scroll(function() {
        if ( isScrolledIntoView(".counter") ) {
            countUp();
        }
    });
});
// ]]></script>

Answer 1

我发现这是由于其他组件而发生的。当我输入页面时，其他组件会自动消失，然后出现。因此，由于组件渲染，我们的计数器从上到下开始。