每页多个视口检查

Question

我正在使用脚本来计算从 0 到实际值的数字。 要启动计数器，我希望元素位于视口的可见区域中。

我找到了一个检查元素是否在可见区域中的解决方案。 但如果我在页面的不同区域使用多个数字元素，这将不起作用。它计算具有相同类的每个元素 (.counter)。

如果我两次使用不同名称的计数器脚本，第二个版本不起作用，第一个版本在滚动时不起作用。仅当我在页面加载的可见区域中有计数器时。

这是我的计数器代码：

$('.counter').each(function() {
    var $this = $(this),
    countTo = $this.attr('data-count');

    $({ countNum: $this.text()}).animate({
        countNum: countTo
    },

    {
        duration: 2000,
        easing:'linear',
        step: function() {
            $this.text(Math.floor(this.countNum));
        },
        complete: function() {
            $this.text(this.countNum);
        }

    });

});

这是我尝试过的解决方案（每页工作一次）：https://stackoverflow.com/a/488073/1788961

在这里你可以找到一个完整的代码：https://codepen.io/cray_code/pen/QYXVWL

这是检查我是否滚动到元素的代码（请参阅上面的链接答案）：

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) && (elemTop >= docViewTop));
}


function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

Answer 1

您检查 isElementInView 一次，而不是单独检查每个元素。当然它会启动所有计数器。

var isElementInView = Utils.isElementInView($('.counter'), false);
if (isElementInView) {
            $('.counter').each(function() {

将它移动到您的 .each 函数中，它将分别适用于每个计数器。

$('.counter').each(function() {
                var $this = $(this),
                countTo = $this.attr('data-count');
                var isElementInView = Utils.isElementInView($this, false);
                if (isElementInView) {
                // do animation

如果您希望在滚动时发生这种情况，则需要在每次滚动时执行代码的页面中添加一个 EventListener：https://developer.mozilla.org/en-US/docs/Web/Events/scroll

function checkForVisible(){
    $('.counter').each(function() {
                var $this = $(this),
                countTo = $this.attr('data-count');
                var isElementInView = Utils.isElementInView($this, false);
                if (isElementInView) {
                // etc code
}

var ticking = false;
window.addEventListener('scroll', function(e) {
  if (!ticking) {
    window.requestAnimationFrame(function() {
      checkForVisible();
      ticking = false;
    });
    ticking = true;
  }
});