Несколько проверок области просмотра на странице - PullRequest
Новая
       42

Несколько проверок области просмотра на странице

0 голосов
/ 22 февраля 2019

Я использую скрипт для подсчета чисел от 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();

1 Ответ

0 голосов
/ 22 февраля 2019

Вы проверяете 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;
  }
});
...