React-компонент ScrollLock в WordPress: Полное руководство с примерами

Главная - WordPress Codex - React-компонент ScrollLock в WordPress: Полное руководство с примерами
Доступна с версии: 5.0
Раздел: Gutenberg
Написал: Александр Сокирка

Компонент ScrollLock из библиотеки @wordpress/components используется для предотвращения прокрутки страницы при открытии модальных окон или других элементов, требующих фиксированного отображения. Этот компонент блокирует прокрутку страницы, добавляя класс lockscroll к элементам document.documentElement и document.scrollingElement.

Зачем нужен ScrollLock?

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

Основное использование ScrollLock

Пример использования компонента ScrollLock в простом приложении:

import { useState } from 'react';
import { ScrollLock, Button } from '@wordpress/components';

const MyScrollLock = () => {
    const [ isScrollLocked, setIsScrollLocked ] = useState(false);

    const toggleLock = () => {
        setIsScrollLocked(locked => !locked);
    };

    return (
        <div>
            <Button variant="secondary" onClick={toggleLock}>
                Toggle scroll lock
            </Button>
            { isScrollLocked && <ScrollLock /> }
            <p>
                Scroll locked:
                <strong>{isScrollLocked ? 'Yes' : 'No'}</strong>
            </p>
        </div>
    );
};

Объяснение кода

  1. useState для отслеживания состояния прокрутки
    Мы используем хук useState для создания состояния isScrollLocked, которое будет отвечать за активность блокировки прокрутки. Это состояние определяет, включен ли компонент ScrollLock.
  2. Кнопка для включения/выключения блокировки прокрутки
    Кнопка с текстом «Toggle scroll lock» позволяет пользователю переключать блокировку прокрутки. Когда пользователь нажимает кнопку, вызывается функция toggleLock, которая инвертирует текущее состояние блокировки прокрутки.
  3. Компонент ScrollLock
    Компонент ScrollLock появляется в рендере, только если состояние isScrollLocked истинно. Это означает, что прокрутка будет заблокирована, как только состояние станет true.
  4. Информация о состоянии прокрутки
    Внизу выводится информация о текущем состоянии блокировки прокрутки: «Yes» или «No», в зависимости от того, заблокирована ли прокрутка.

Описание параметров (Props)

Компонент ScrollLock не принимает параметров напрямую. Все управление состоянием прокрутки происходит через компонент-обертку, который использует ScrollLock внутри себя, как показано в примере выше.

Важные моменты

  1. Отсутствие контента
    ScrollLock сам по себе не рендерит контент, так как его задача заключается исключительно в применении стилей для блокировки прокрутки страницы.
  2. Применение класса lockscroll
    Когда компонент ScrollLock рендерится, он добавляет класс lockscroll к document.documentElement и document.scrollingElement, что предотвращает прокрутку страницы.
  3. Влияние на модальные окна и всплывающие элементы
    Этот компонент особенно полезен при работе с модальными окнами или другими всплывающими элементами, которые требуют фиксированного положения на экране. Использование ScrollLock помогает обеспечить более стабильное и удобное взаимодействие с пользователем.

Пример с реальной модальной формой

Предположим, вы создаете модальное окно, которое должно быть отображено на странице. При открытии окна вы хотите заблокировать прокрутку страницы:

import { useState } from 'react';
import { ScrollLock, Button, Modal } from '@wordpress/components';

const MyModalWithScrollLock = () => {
    const [ isModalOpen, setIsModalOpen ] = useState(false);
    const [ isScrollLocked, setIsScrollLocked ] = useState(false);

    const toggleModal = () => {
        setIsModalOpen(!isModalOpen);
        setIsScrollLocked(!isScrollLocked);  // Блокируем или разблокируем прокрутку
    };

    return (
        <div>
            <Button variant="primary" onClick={toggleModal}>
                {isModalOpen ? 'Close Modal' : 'Open Modal'}
            </Button>

            {isModalOpen && (
                <Modal
                    title="My Modal"
                    onRequestClose={toggleModal}
                    isOpen={isModalOpen}
                >
                    <div>
                        <p>Модальное окно с блокировкой прокрутки!</p>
                        <Button variant="secondary" onClick={toggleModal}>Закрыть</Button>
                    </div>
                </Modal>
            )}

            {isScrollLocked && <ScrollLock />}

            <p>
                Scroll locked:
                <strong>{isScrollLocked ? 'Yes' : 'No'}</strong>
            </p>
        </div>
    );
};

Объяснение

  • isModalOpen: Состояние, которое отслеживает, открыто ли модальное окно.
  • isScrollLocked: Состояние, которое контролирует блокировку прокрутки. Оно меняется в момент открытия или закрытия модального окна.
  • Modal: Модальное окно из библиотеки @wordpress/components. Когда окно открыто, прокрутка страницы блокируется с помощью ScrollLock.

Заключение

Компонент ScrollLock — это полезный инструмент для блокировки прокрутки страницы, особенно при работе с модальными окнами или другими всплывающими элементами. Он помогает улучшить взаимодействие с пользователем, предотвращая нежелательную прокрутку и фокусируя внимание на модальном содержимом.

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: Gutenberg