Как сохранить событие прокрутки countUp.js от срабатывания при каждой прокрутке - PullRequest
Новая
       25

Как сохранить событие прокрутки countUp.js от срабатывания при каждой прокрутке

0 голосов
/ 21 сентября 2019

У меня есть страница с четырьмя числовыми элементами, которые должны увеличиваться при помощи CountUp.js, когда каждый из них прокручивается в поле зрения.Тем не менее, все четыре элемента возвращаются к нулю, а затем возвращаются к своему назначенному значению данных при каждой прокрутке.

В настоящее время я использую метод .forEach, чтобы пройти через все элементы (.counter), которые имеют атрибут data-value, который ищет CountUp.

Как я могу сделать это такCountUp запускается только один раз для элементов при их прокрутке?

Я заранее извиняюсь, если это уже было рассмотрено, но я прочитал много статей о переполнении стека и не смог решить эту проблему,

Я пытался установить флаг: 

let hasFired = false;

И затем обновлять этот флаг в операторе .forEach. 

const options = {
    useEasing: true,
    useGrouping: true,
    separator: ',',
    decimal: '.',
};

const number = document.querySelectorAll('.counter');
let hasFired = false;

function countStart() {
    number.forEach(function(item) {
            const countValue = item.getAttribute('data-value');
            const countUP = new CountUp(item, 0, countValue, 0, 2, options);
            if (!countUP.error) {
                    countUP.start();
            }
    });
}

function scrollTrigger() {
    number.forEach(function(item) {
            const boxPosition = item.getBoundingClientRect().top;
            const boxPositionPercent = (boxPosition / window.innerHeight) * 100;
            if (boxPositionPercent <= 100 && hasFired === false) {
                    countStart();
                    hasFired = true;
            } else {
                    console.log('else fired');
            }
    });
}

window.addEventListener('scroll', scrollTrigger);

Даже при установленном флаге hasFiredобновляется, каждое действие CountUp запускается при любой прокрутке.

Вот как выглядит HTML: 

The HTML of my page is like this:

<main id="ar-contain">
    <div class="ar-group">
        <div class="ar-narrow">
            <div class="ar-group__box">
                <h2 class="counter">0</h2>
            </div>
        </div>
    </div>
</main>
...