滚动锁定

ScrollLock 是一个无内容的 React 组件，用于声明式地防止模态 UI 的滚动渗透到页面主体。该组件将 lockscroll 类应用于 document.documentElement 和 document.scrollingElement 元素，以阻止主体滚动。当它存在时，锁定即生效。

用法

在模态 UI 中声明滚动锁定。

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>
    );
};