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;
  }
});

每页多个视口检查

1 个答案: