滚动超出文档中的特定点后激活动画

Question

我用js做了一个向上计数的计数器动画，但是当我刷新页面时计数器就开始向上计数动画（不管我在哪里，也不管我是否能看到它）。我希望计数器仅在计数器 div 位于视点中时（当我向下滚动并看到它时）开始工作。超文本标记语言<div class="content bg-warning">    <div class="row m-0 py-5 d-flex justify-content-center">        <div class="counter" data-count="2200" style="color: white; font-size: 32px; font-weight: bold;">0</div>    </div></div>js<script type="text/javascript">    $('.counter').each(function() {      var $this = $(this),          countTo = $this.attr('data-count');            $({ countNum: $this.text()}).animate({        countNum: countTo      },      {        duration: 8000,        easing:'linear',        step: function() {          $this.text(Math.floor(this.countNum));        },        complete: function() {          $this.text(this.countNum);          //alert('finished');        }      });      });</script>我该如何解决这个问题？