每页多个视口检查

Question

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

我找到了检查元素是否在可见区域的解决方案。但如果我在页面的不同区域使用多个数字元素，那将不起作用。它计算具有相同 class (.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);
        }

    });

});

这是我尝试过的解决方案（每页一次）：

在这里你可以找到一个 fiddle 的完整代码：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;
  }
});

每页多个视口检查

Multiple viewport checks per page

javascript

jquery

counter

viewport