Какое событие повесить на счетчик чтобы он срабатывал при прокрутке к определенному блоку на странице?

Question

[Danya Wyse]

Есть счетчик, нужно чтобы он начинал свою работу когда попадал в область видимости

Answer 1

[wonderingpeanut]

https://developer.mozilla.org/en-US/docs/Web/API/I...

внутри обсервера добавялешь слушатель нужного события

Comments

[Danya Wyse]

Привет, подскажи как именно
Вот код счетчика

const counters = document.querySelectorAll('.counter');

		counters.forEach((counter) => {
			counter.innerText = '1';

			const updateCounter = () => {
				const target = +counter.getAttribute('data-target');
				const c = +counter.innerText;
				const increment = target / 250;

				if (c < target) {
					counter.innerText = `${Math.ceil(c + increment)}`;
					setTimeout(updateCounter, 1);
				} else {
					counter.innerText = target;
				}
			};
			updateCounter();
		})

[Danya Wyse]

У меня получается через клик или скролл повесить,но как реализовать правильно не вкуриваю пока что

[wonderingpeanut]

Danya Wyse, прочитай про intersection observer, там можно выбрать русский в правом верхнем углу.

Последовательность следующая: создаешь обсервер, говоришь ему наблюдать за элементом, при пересечении которого ты хочешь запускать какую-то логику.

Всякий раз, когда цель достигает порогового значения, указанного для IntersectionObserver, вызывается колбэк-функция callback. Где callback получает список объектов IntersectionObserverEntry и наблюдателя

В этом колбэке пишешь логику увеличения значения счетчика

[Danya Wyse]

wonderingpeanut,
По итогу рабочий счетчик

let isCounted = false;
const scrollImations = (entries, observer) => {
	entries.forEach((entry) => {
		// анимируем, если элемент целиком попадает в отслеживаемую область
		if (isCounted === false) {
			if (entry.isIntersecting && entry.intersectionRatio == 1) {
				const counters = document.querySelectorAll('.counter');
				counters.forEach((counter) => {
					counter.innerText = '1';
					const updateCounter = () => {
						isCounted = true;
						const target = +counter.getAttribute('data-target');
						const c = +counter.innerText;
						const increment = target / 250;
						if (c < target && !counter.classList.contains('ready-count')) {
							counter.innerText = `${Math.ceil(c + increment)}`;
							setTimeout(updateCounter, 1);
						} else {
							counter.innerText = target;
						}
					};
					updateCounter();
				})
			} else {
				return
			}
		}
	});
}
const options = {
	threshold: 1.0,
};
const observer = new IntersectionObserver(scrollImations, options);
const vision = document.querySelectorAll('.counter');
vision.forEach((counter) => {
	observer.observe(counter);
});