div在滚动到视图中时启动计数器

Question

所以，我有计数器，从0到特定数字。 包含计数器的div远低于页面 - 当用户到达时，计数器很可能已经达到最大数量并停止。 当计数器div滚动到视图中时，如何触发该功能？

Answer 1

当一个元素位于名为jQuery inview的视口中时，会执行一个jQuery脚本。将其链接到您的HTML文件，然后使用以下内容绑定事件，当div是inview。

function increment() {
    $('div').one('inview', function (event, visible) {  //one animates it once
        if (visible == true) {
            // element is now visible in the viewport
            var interval = setInterval(function () {
                $('#number').text(number);
                if (number >= target){
                    clearInterval(interval);
                }
                number++;
            }, 50);
        } else {
            // element has gone out of viewport
        }
    });
}
$(window).on("load", increment);