Как обновить стиль компонента при прокрутке в React?

Иногда мы хотим обновить стиль компонента при прокрутке с помощью React.

В этой статье мы рассмотрим, как обновить стиль компонента при прокрутке с помощью React.

Обновите стиль компонента при прокрутке в React

Мы можем добавить прослушиватель событий прокрутки в обратный вызов хука useEffect для прослушивания события прокрутки.

Например, мы можем написать:

import React, { useEffect, useState } from "react";
export default function App() {
  const [offset, setOffset] = useState(0);
  useEffect(() => {
    window.onscroll = () => {
      setOffset(window.pageYOffset);
    };
  }, []);
  console.log(offset);
  return (
    <div>
      {Array(100)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </div>
  );
}

У нас есть состояние offset, которое мы создаем с помощью хука useState.

Затем мы вызываем хук useEffect с обратным вызовом, который устанавливает свойство window.onscroll в функцию, которая вызывает setOffset, чтобы установить offset в положение прокрутки.

window.pageYOffset имеет позицию вертикальной прокрутки окна браузера.

Затем мы регистрируем offset в журнале консоли.

И мы отображаем некоторый контент, который требует прокрутки для просмотра в return statement.

Теперь, когда мы прокручиваем вверх или вниз, мы видим offset в журнале консоли.

Заключение

Мы можем добавить прослушиватель событий прокрутки в обратный вызов хука useEffect, чтобы прослушивать событие прокрутки.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .