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

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Давайте разбираемся: стили React можно динамически изменять, отслеживая прокрутку страницы и прослушивая соответствующее событие. При этом стоит использовать хуки useState и useEffect для управления состоянием и жизненным циклом компонента. Вот представляю вам короткий пример кода:

Скопировать код

import React, { useState, useEffect } from 'react';

const DynamicStyleComponent = () => {
  const [style, setStyle] = useState({}); 

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      let translateValue = Math.min(0, scrollTop / 3); 
      setStyle({
        transform: `translateY(${translateValue}px)`
      });
    };

    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll); 
  }, []);

  return <div style={style}>🎨 🖌 Создаем изображения в DOM!</div>;
};

Здесь функция handleScroll при каждом событии прокрутки изменяет стиль элемента через состояние, работая активнее, чем художник. Мы используем Math.min для ограничения преобразования, а следовательно, анимации. И не забываем удалять слушателя при размонтировании компонента, чтобы предотвратить утечки памяти.

Кинга Идем в IT: пошаговый план для смены профессии

Хитрости мастерства

Рациональное использование событий с помощью throttle

Частый вызов функции на событии прокрутки может нагрузить браузер, что отразится на производительности. Для предотвращения этого можно ограничить частоту вызовов, применив throttle:

Скопировать код

import { throttle } from 'lodash';

const handleScroll = throttle(() => {
  // Задаем темп, чтобы все проходило плавно
}, 100); // Обновляем информацию каждые 100 мс

Подробнее об этом расскажет наш спикер на видео

Адаптивные стили: подходы для разных устройств

Настройка стилей под определенное устройство заключается в выборе подхода в соответствии с размером экрана, чтобы обеспечить оптимальный пользовательский опыт:

Скопировать код

const handleScroll = () => {
  const width = window.innerWidth || document.documentElement.clientWidth;
  
  if (width > 768) {
    // Больше места – одна стратегия
  } else {
    // Меньше пространства – другая стратегия
  }
};

Глубокая работа с DOM с помощью refs

В некоторых ситуациях возникает необходимость в прямых манипуляциях с DOM для решения более сложных задач. В этом сценарии инструментом номер один становится useRef:

Скопировать код

import React, { useRef, useEffect } from 'react';

const DynamicStyleComponentWithRef = () => {
  const contentRef = useRef(null); 
  
  useEffect(() => {
    const handleScroll = () => {
      if(contentRef.current) {
        contentRef.current.style.backgroundPositionY = `${-window.scrollY / 2}px`;
      }
    };

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

  return <div ref={contentRef}>🎨 Поехали!</div>;
};

Перед применением каких-либо изменений убедитесь, что contentRef.current не равен null.

Динамическое изменение классов в зависимости от положения прокрутки

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

Скопировать код

const [className, setClassName] = useState('casualWear');

const handleScroll = () => {
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  const newClassName = scrollTop > 500 ? 'formalWear' : 'casualWear';
  setClassName(newClassName);
};

return <div className={className}>Рад видеть вас!</div>;

Визуализация

Говоря простыми словами:

Позиция прокрутки: Низкая  • Внешний вид UI: Повседневный
Позиция прокрутки: Средняя • Внешний вид UI: Полуформальный 
Позиция прокрутки: Высокая • Внешний вид UI: Формальный

Это напоминает лифт в здании: чем выше вы поднимаетесь, тем более официальным становится стиль интерфейса.

Продвинутые техники в области прокрутки

Плавная прокрутка с пассивными слушателями

Применение { passive: true } при регистрации слушателя событий поможет избежать задержек и обеспечит плавный процесс прокрутки:

Скопировать код

window.addEventListener('scroll', handleScroll, { passive: true }); // Прокрутка теперь идет плавно, как бриз

Изучаем параллакс-эффекты

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

Скопировать код

const handleScroll = () => {
  const speed = window.scrollY / 2;
  // Обновление стиля для создания эффекта параллакса
};

Не забывайте удалять слушатели событий после их использования – это важно, чтобы избежать утечек памяти.

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Какой хук используется для отслеживания состояния стиля в компоненте при прокрутке?

1 / 5

Свежие материалы

Видео уроки по мобильной разработке

6 сентября 2024

Обзор канала The Net Ninja

6 сентября 2024

Каналы на русском языке

6 сентября 2024