Не используйте scroll прослушиватель событий для такого рода вещей, это плохо влияет на производительность браузера.
Для этого лучше использовать Intersection Observer (IO), это было разработано для таких проблем. С помощью ввода-вывода вы можете реагировать всякий раз, когда элемент HTML пересекается с другим (или с областью просмотра)
Проверьте эту страницу , она показывает, как анимировать элемент, когда он попадает в область просмотра (прокрутите до конца)
Краткий обзор того, что вы должны сделать:
Сначала вы должны создать нового наблюдателя:
var options = {
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
Здесь мы определяем, что как только ваш целевой элемент становится видимым на 100% в области просмотра (порог 1), ваша функция обратного вызова выполняется. Здесь вы можете определить другой процент, 0,5 будет означать, что функция будет выполнена, когда ваш элемент станет видимым на 50%.
Затем вы должны определить, какие элементы наблюдать, в вашем случае это будут counter элементы:
var target = document.querySelector('.counter');
observer.observe(target);
Наконец, вам нужно указать, что должно произойти, когда элемент станет видимым. в окне просмотра, определив функцию обратного вызова:
var callback = function(entries, observer) {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// here you animate the skill bar
});
};
Если вам требуется поддержка старых браузеров, используйте официальный полифилл из w3 c.
Если вы не нужно снова запускать анимацию, когда элементы снова прокручиваются для просмотра, тогда вы также можете наблюдать элемент , как только он будет анимирован.