Подсчет прокрутки – популярная функция в веб-разработке, которая добавляет динамичный и привлекательный элемент в пользовательские интерфейсы. В этой статье мы рассмотрим различные методы в React для реализации функциональности подсчета при прокрутке. Мы сосредоточимся на реализации эффекта подсчета только один раз, чтобы обеспечить удобство взаимодействия с пользователем. Итак, приступим!

Метод 1: использование React Hooks
Один из способов добиться эффекта однократного подсчета при прокрутке — использовать React Hooks, в частности useEffectи useStateкрючки. Вот пример фрагмента кода, демонстрирующий этот подход:

import React, { useState, useEffect } from 'react';
const CountUpOnScroll = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 100) {
        setCount(42); // Replace with your desired count value
        window.removeEventListener('scroll', handleScroll);
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  return <div>{count}</div>;
};
export default CountUpOnScroll;

Объяснение:
В этом подходе мы используем хук useEffectдля присоединения прослушивателя событий прокрутки к объекту окна. Внутри обработчика событий мы проверяем положение прокрутки (window.scrollY) и устанавливаем соответствующее значение счетчика. Как только желаемая позиция прокрутки достигнута (например, 100 пикселей), мы обновляем счетчик и удаляем прослушиватель событий, чтобы предотвратить дальнейшее выполнение.

Метод 2: API Intersection Observer
Другой метод подсчета при прокрутке — использование API Intersection Observer. Этот API позволяет нам отслеживать, когда элемент входит или выходит из области просмотра. Вот пример фрагмента кода:

import React, { useState, useEffect, useRef } from 'react';
const CountUpOnScroll = () => {
  const [count, setCount] = useState(0);
  const targetRef = useRef(null);
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        setCount(42); // Replace with your desired count value
        observer.unobserve(targetRef.current);
      }
    });
    observer.observe(targetRef.current);
    return () => {
      observer.unobserve(targetRef.current);
    };
  }, []);
  return <div ref={targetRef}>{count}</div>;
};
export default CountUpOnScroll;

Объяснение:
В этом подходе мы используем IntersectionObserverдля наблюдения за целевым элементом (в данном случае, divсо ссылкой). Как только элемент пересекает область просмотра, срабатывает функция обратного вызова, и мы можем соответствующим образом обновить значение счетчика. Как и в предыдущем методе, мы удаляем наблюдателя после обновления счетчика.

Метод 3: устранение дребезга событий прокрутки
Иногда события прокрутки могут запускаться чрезмерно, что приводит к неэффективной производительности. Чтобы смягчить это, мы можем использовать технику устранения дребезга, чтобы ограничить частоту выполнения события прокрутки. Вот пример фрагмента кода с использованием библиотеки lodash:

import React, { useState, useEffect } from 'react';
import { debounce } from 'lodash';
const CountUpOnScroll = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const handleScroll = debounce(() => {
      if (window.scrollY > 100) {
        setCount(42); // Replace with your desired count value
      }
    }, 100);
    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  return <div>{count}</div>;
};
export default CountUpOnScroll;

Объяснение:
В этом методе мы используем функцию debounceиз библиотеки lodashдля создания версии обработчика событий прокрутки с устранением дребезга. Функция устранения дребезга задерживает выполнение, гарантируя, что логика подсчета запускается только после указанной задержки (например, 100 миллисекунд) без активности прокрутки.

В этой статье мы рассмотрели различные методы подсчета функций прокрутки в React. Мы научились реализовывать эффект подсчета только один раз, чтобы улучшить взаимодействие с пользователем. Используя React Hooks, API Intersection Observer или устранение событий прокрутки, вы можете создавать привлекательные и интерактивные анимации на основе прокрутки в своих приложениях React. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует требованиям вашего проекта.