时间戳

首页 > 解决方案 > 验证滚动时满足条件，然后只运行一次函数

javascript - 验证滚动时满足条件，然后只运行一次函数

问题描述

我有运行计数器的代码，从 0 计数到 HTML 标记内的文本定义的数字。这很好用——我有四个元素使用这个类，当页面加载时，每个元素都会从 0 开始计数。

但棘手的地方在于，我希望在每个元素进入视野时开始相应的计数器。

我发现当我滚动时计数器不断重新启动。我尝试使用.one()附加到.scroll()事件处理程序的 jQuery 方法，但我需要不断检查是否满足关于可见元素的条件，这就是我遇到的问题。

这是我所拥有的：

$(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’”错误。

标签： javascriptjquery

解决方案

正如 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>

推荐阅读