BiteSize 1: Обнаружение прокрутки и настройка условного рендеринга

или как установить логическое значение, когда прокрутка происходит в определенной области

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

Сегодня я покажу вам пример того, как обнаружить прокрутку в первых 100 пикселях и в результате условно отрендерить что-то. Это реальный рабочий пример, который я использовал, когда у меня была кнопка, которую я хотел видеть только тогда, когда я был в самом верху страницы.

import { useEffect, useState } from 'react'

function MyComponent() {
  const [scrolled, setScrolled] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      const scrollY = window.scrollY
      if (scrollY > 100) {
        setScrolled(true)
      } else {
        setScrolled(false)
      }
    }

    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <div>
      {scrolled ? (
        <p>You have scrolled more than 100 pixels!</p>
      ) : (
        <p>Keep scrolling...</p>
      )}
    </div>
  )
}

В этом фрагменте кода мы используем хук useEffect, чтобы добавить в окно прослушиватель прокрутки. Всякий раз, когда пользователь прокручивает, мы проверяем значение `window.scrollY` и соответствующим образом обновляем наше состояние `scrolled`. Мы также очищаем прослушиватель при размонтировании компонента.

В вашей фактической реализации вы можете настроить пороговое значение (в данном случае `100`) или использовать версию `handleScroll()` с подавлением дребезга для повышения производительности.

Вот и все! До следующего раза :)